是否具有一种样式的h1 :: after和另一种样式的.class h1 :: after？

Question

大家好，我希望我的标题足够清楚，但是在使用<h1></h1>作为分隔符的h1::after{}之后我得到了一个svg

在我的其中一个元素中，我需要更改h1::after{}的颜色，因此看起来像.element-class h1::after{}一样，我正在尝试尝试，但不起作用。

有可能做这样的事情吗？

Answer 1

向要更改颜色的h1添加一个类

<h1 class="change-color"></h1>

然后您可以使用该类

.change-color::after{...}

让我知道是否有帮助！

Answer 2

是的，您可以有更多特定的选择器，这些选择器将覆盖现有的伪元素样式。

valign

h1::after {
  content: ' pseudo';
  color: red;
  font-size: 12px;
}

.thing h1::after {
  content: ' other pseudo';
  color: blue;
}

请注意，如果要更改SVG颜色，则可能需要根据SVG的复杂程度来更改SVG内容。