Menu
Is it possible to get multiple pseudo elements in one object like this?
div { content: 'A' }
div::before { content: 'B'; }
div::before(2) { content: 'C'; }
div::before(3) { content: 'D'; }
I have tried it but it doesn't work.
914
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.)
There are currently 5 supported pseudo-elements: ::after inserts content after the specified element. ::before inserts content before the specified element. ::first-letter selects the first letter of a specified element.
:last-child is a pseudo-class, whereas :after (or ::after in CSS3) is a pseudo-element. To quote the standard: Pseudo-classes are allowed anywhere in selectors while pseudo-elements may only be appended after the last simple selector of the selector. This means your syntax is correct according to CSS2.
That syntax is from the old Generated Content level 3 module. It doesn't work because nobody has implemented any part of this module, ever. In fact, the spec itself has been abandoned for years due to lack of interest and implementation, and is pending a low-priority rewrite.
There is no telling even whether this feature will survive the rewrite because nobody's willing to implement it. And, frankly, I'm not holding my breath...
Your only solutions here are to use extra markup instead of pseudo-elements, or find some other way to generate that content using a script.
196
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
