Манипулирование псевдоэлементом

Question

У меня есть этот DOM

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

Я не могу изменить этот HTML-код, но мне нужно добавить значок SVG.Этот SVG используется для функции.По клику мне нужно добраться до нижней части страницы.Я создаю этот CSS

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

Теперь я не могу манипулировать псевдоэлементом, но не могу найти другое решение для этого.Как вы можете решить эту проблему?

Answer 1

Я не мог найти то, что вы на самом деле хотите.но манипулировать псевдоэлементами невозможно. Но есть обходной путь.

Вы можете определить другое имя класса, например .active, измените класс элемента на него для управления псевдоэлементом.

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

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

не забывайте, что псевдоэлементы по умолчанию встроены, поэтому, если вы хотите, чтобы это фоновое изображение отображалось, вам нужно сделать его display: block и определить набор из width и height.

и все готово.Вы можете использовать этот класс .active, чтобы контролировать показ ::before или нет JavaScript .