在伪元素上添加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

::after在CSS 3中引入了该符号,以便在伪类和伪元素之间建立区分.浏览器也接受:afterCSS 2中引入的符号.

注意: Microsoft Internet Explorer 8仅支持符号后:.

我认为错误信息可能是内容,而不是装饰 - 但这是你的电话.

Answer 2

该:after元素不是物理 DOM 元素，因此不能带类。

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

.error {
    .error-styles;
}