Pseudo element manipulation

Question

I have this DOM

<div class="slotvideo">
  <div class="posterimage"></div>
</div>

I can't modify this html code but I need to add an SVG icon. This SVG is used for a function. On click I need to reach the bottom of the page. I create this CSS

.posterimage::before {
  content: "";
  background-image: mysvg;
}

Now, I can't manipulate pseudo element but I can't find another solution for doing it. How could you fix this problem?

probably this: https://stackoverflow.com/questions/5041494/selecting-and-manipulating-css-pseudo-elements-such-as-before-and-after-usin/49618941#49618941 — Temani Afif, Dec 18 '18 at 21:55
i'm a little unclear on what your problem is. you need to add a pseudo-element and you want to attach an event handler to the click of that pseudo element? if so, it's not possible to have event listeners on pseudo elements. the closest you can get is to do some hacky mouse pointer detection to tell if the mouse is "over" the pseudo element when the base element is clicked. — T Nguyen, Dec 18 '18 at 22:00
@TNguyen if you only want to listen to a single pseudo-element mouse-events and not to its parent's ones, then you could trick it with the pointer-events rule: https://jsfiddle.net/vcxw8f5q/ But that's again closer to an hack than anything else and requires a lot of conditions for it to work... — Kaiido, Dec 19 '18 at 01:53
try `background-image: url(yourSvgPath) ` or you can just put element — Tony_zha, Dec 19 '18 at 02:10

score 0 · Answer 1 · answered Dec 19 '18 at 01:56

I couldn't find what do you actually want. but about manipulating pseudo-elements, it's not possible. But there is a work-around.

You can define another class name like .active change the element's class to it for controlling pseudo-element.

.posterimage {
    /* anything... */
}

.posterimage.active::before {
    content: "";
    background-image: mysvg;
}

don't forget, psuedo-elements are inline by default, so if you want this background-image to show up, you need to make it display: block and define a set of width and height though.

and it's done. you can use that .active class to have controll of showing ::before or not by JavaScript.

Pseudo element manipulation

1 Answers1