How to access : :before element

Question

I have use viwerJs for show the images. when I going to access the Css in my project I wanted to use javascript for that. So my problem was when I going to do fowllowing process I couldn't access ::before element to set the margin

here is the code I can do in css but i want to do thi in JS.

    .viewer-toolbar > ul > li::before{
  margin: 10px 0px 0px 10px !important;
}

.viewer-play::before {
    background-position: -97px 3px !important;
 }

here is my try

 viewImage(event) {
    let viewer = new Viewer(event.currentTarget, {
      navbar: false,
      viewed() {
        debugger
        viewer.zoomTo(2);

        viewer['image'].style['border'] = "1px solid white";
        
        for (let t = 0; t < viewer['toolbar'].childNodes[0].childNodes.length; t++){
          let li = viewer['toolbar'].childNodes[0].childNodes[t];

          if(li.className === 'viewer-play viewer-large'){

            li.style.width = '46px';
            li.style.height = '46px';
            li.before.style.margin = '10px 0px 0px 10px'; // this my try but it not work

          }else{

            li.style.width = '40px';
            li.style.height = '40px';

          }
          
        }
      }

    });

    viewer.show();
  }

Click here to see the jsfiddle

Possible duplicate of https://stackoverflow.com/questions/21032481/change-the-style-of-before-and-after-pseudo-elements — Master.Deep, Feb 18 '22 at 08:09
NO I just want to use JS not css. see my example there dont have any css part. — janaka ravi, Feb 18 '22 at 08:11

How to access : :before element

0 Answers0