Question

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.

Answer 1

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.