Adding CSS class on pseudo-element
css, pseudo-element
Solution
There's no way to give an HTML attribute of any kind to a psuedo element.
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"?
According to this:
https://developer.mozilla.org/en/CSS/:after
The `::after` notation was introduced in CSS 3 in order to establish a discrimination between pseudo-classes and pseudo-elements. Browsers also accept the notation `:after` introduced in CSS 2.
Note: Microsoft Internet Explorer 8 supports the :after notation only.
I would argue that error messages might be content, not decoration - but that's your call.
Problem
I was wondering if there's a way to add a CSS class to pseudo-elements, such as :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. 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"? Thanks in advance!