8

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.

Nathan Arthur
  • 8,287
  • 7
  • 55
  • 80
webchun
  • 1,204
  • 2
  • 13
  • 30
  • 1
    The `content` property is used with `:before` and `:after` pseudo-elements so that's why your first line doesn't work. What you're trying to do in lines 3 and 4 isn't supported so that's why those don't work. What are you trying to do, exactly? – sachleen Nov 20 '12 at 02:40
  • What is the result you are after? – Dimitris Damilos Nov 20 '12 at 02:59
  • You can see how obscure this is when nobody recognizes the code except somebody who is intimately familiar with the spec and the process: http://www.w3.org/TR/css3-content/#inserting0 Also see my answer. – BoltClock Nov 20 '12 at 03:17
  • Some have already asked this, but what are you trying to do? Based on your example, you could achieve the _nearly_ the same thing with `div:before { content: 'ABCD'}`, only you could not individually style those letters and their pseudo-boxes they generate. Was that your ultimate purpose in wanting to split these into multiple pseudo-elements? – ScottS Nov 20 '12 at 03:52
  • Well, I'm actually want to add font icons using :before to an html object, but the object already have :before element for other purpose – webchun Nov 20 '12 at 03:56

1 Answers1

7

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.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • I certainly hope a feature like that would not survive: very hard to rationalize the complexity from a purely styling perspective, but certainly opens the door for horrible abuses. – Matt Whipple Nov 20 '12 at 03:26
  • @Matt Whipple: Agreed — that must why it didn't receive attention from implementers. It was an interesting idea though... on paper anyway. Personally I'd hope for `::outside` to survive; that seems easier to implement and has several real use cases. – BoltClock Nov 20 '12 at 03:29
  • 1
    Yes, `::outside` looks useful. It would unfortunately likely raise the complexity of applying CSS unjustifiably as CSS can presently be applied in a simple SAX style approach with minimal state which the introduction of that type of traversal would thoroughly complicate. – Matt Whipple Nov 20 '12 at 03:38