在伪元素上添加 CSS 类

Question

我想知道是否有办法为伪元素添加CSS类，例如

:after

。

我想使用

:after

附加错误消息。 我还希望错误消息的样式与其他错误消息的样式相同。

这有效：

.error:after {
  content: "Error Message";
  color: red;
}

但是我可以做这样的事情来添加比颜色样式更多的东西吗？

.error:after {
  content: "Error Message";
  class: error_message_styles;
}

此外，使用

::after

与

:after

之间有区别吗？

Answer 1

无法为 psuedo 元素提供任何类型的 HTML 属性。

只需使用选择器两次：

.error:after {
  content: "Error Message";
}
.error:after, .error-style {
  color:red;
}

另外，使用“::after”和“:after”之间有区别吗？

据此：

https://developer.mozilla.org/en/CSS/:after

CSS 3 中引入了

::after

表示法，以便建立 伪类和伪元素之间的区别。浏览器 还接受 CSS 2 中引入的符号

:after

。

注意： Microsoft Internet Explorer 8 支持 :after 表示法 只是。

我认为错误消息可能是内容，而不是装饰 - 但这是你的决定。

Answer 2

:after

元素不是物理 DOM 元素，因此它不能采用类。

如果您使用像LESS这样的样式表库，您可以通过将类包含为属性来混合来自其他类的样式：

.error {
    .error-styles;
}