I'd like to apply two css ::after
pseudo-elements to a single DOM element, each with a different colour. (Yes, I could wrap the DOM element in another DOM element and give each one and ::after
pseudo-element, but my preference is cleaner html.)
I doubt it's possible, but wonder if someone can tell me better.
I especially doubt the possibility of chaining ::after
pseudo-elements together so that one ::after
pertains to another, which pertains to a DOM element, but if anyone knows how to make that happen, please do tell.
The ::before selector inserts something before the content of each selected element(s). Use the content property to specify the content to insert. Use the ::after selector to insert something after the content.
In CSS, ::after creates a pseudo-element that is the last child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.
Multiple pseudo-elements can be created with the ::before(ordinal) and ::after(ordinal) notation, where 'ordinal' is a positive integer. ::before pseudo-elements are ordered descending by 'ordinal' from the host element's content edge.
1, an element can only have at most one of any kind of pseudo-element at any time. (This means an element can have both a :before and an :after pseudo-element — it just cannot have more than one of each kind.)
You can use a :before
pseudo-element in addition to your :after
- http://jsfiddle.net/BePSq/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With