在伪元素上添加 CSS 类

Adding CSS class on pseudo-element

提问by Zhao Li

I was wondering if there's a way to add a CSS class to pseudo-elements, such as :after.

我想知道是否有办法将 CSS 类添加到伪元素，例如：after。

I want to use :after to append an error message. I also want the error message styled the same way as the other error messages.

我想使用 :after 附加错误消息。我还希望错误消息的样式与其他错误消息的样式相同。

This works:

这有效：

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

But can I do something like this to add more than the color styling?:

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

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

Also, is there a difference between using "::after" vs ":after"?

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

Thanks in advance!

提前致谢！

采纳答案by Wesley Murch

There's no way to give an HTML attribute of any kind to a psuedo element.

无法为伪元素赋予任何类型的 HTML 属性。

Just use the selector twice:

只需使用选择器两次：

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

Also, is there a difference between using "::after" vs ":after"?

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

According to this:

根据这个：

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

The ::afternotation was introduced in CSS 3 in order to establish a discrimination between pseudo-classes and pseudo-elements. Browsers also accept the notation :afterintroduced in CSS 2.

Note:Microsoft Internet Explorer 8 supports the :after notation only.

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

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

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

I would argue that error messages might be content, not decoration - but that's your call.

我认为错误消息可能是内容，而不是装饰 - 但这是您的要求。

回答by JoeJ

The :afterelement is not a physical DOM element, so it can't take a class.

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

If you use a stylesheet library like LESS, you can mix in the styles from other classes by including the class as a property:

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

.error {
    .error-styles;
}