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();
}