Adding CSS class on pseudo-element

Question

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?

No Results Found · Accepted Answer · 2012-05-15 21:37:37Z

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.

For me this wasn't the correct solution, see this answer: stackoverflow.com/a/9202565/2901207

JoeJ · Accepted Answer · 2012-05-15 21:44:19Z

10

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

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

.error {
    .error-styles;
}

answered May 15, 2012 at 21:44

JoeJ

9401 gold badge6 silver badges18 bronze badges

Collectives™ on Stack Overflow

Adding CSS class on pseudo-element

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related