伪元素操纵

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和{ {1}}。

就完成了。您可以使用该height类通过 JavaScript 控制是否显示.active。