Why is it impossible to change content in css?

Question

CSS2.1 pseudo-selectors such as ::after and ::before allows to add text content to the page. For example :

CSS

 p:after { content:' Batman!' }

HTML

<p>Na Na Na Na Na Na</p>

Output in the browser

Na Na Na Na Na Na Batman!

---

My question, with the same HTML source, is why this piece of CSS

 p { content:'My hero is' }
 p:after { content:' Batman!' }

doesn't outputs this

My hero is Batman!

but instead outputs this ?

Na Na Na Na Na Na Batman!

---

The w3c spec on the content property : http://www.w3.org/TR/CSS21/generate.html#propdef-content

---

Answer - I was looking at the CSS2.1 spec. The CSS3 spec indicates it is possible even without ::after and ::before pseudo-selectors. But not every browser implements it.

• Chrome 20.0.1132.57 : NO
• Opera 12.00 r1467 : YES
• Safari 5.1.7 (7534.57.2) : NO
• IE 8.0.7601 : NO (the CSS2 content property is not even implemented)

Answer 1

Actually it is possible to use content property directly on elements, and not on pseudo-elements only. Try

   p { content:'My hero is' }

in Opera and you'll see the result you wanted. The thing is other browsers don't support it yet.

A lot of other interesting things concerning generated content cat be found in CSS3 Generated and Replaced Content Module, but we'll have to wait a bit until browser venrors implement it.

Answer 2

As specified by the spec content: is only usable together with the *pseudo-elements :before and :after, there isn't a better answer than that I'm afraid.

12.2 The 'content' property

This property is used with the :before and :after pseudo-elements to generate content in a document.

---

However, if the question should be interpreted as why aren't we allowed to add content anywhere we like using CSS? The answer is only theoretical but as simple:

CSS is not meant to be a way to provide new content, it is a way to format existing such.

"You are not supposed to change any content using CSS, there is not that much more than that to it. The :before and :after pseudo-elements have been discussed quite frequently because they break the barrier between formatting and content." - refp

---

:before/:after are a great resources because they allow you to format your data in a way that wasn't possible before their appearance. Notice that I use the word "format" because I still consider it to be a formatter, not a data generator.

Coming up with a usable alternative that would still have a clear line between formatting and content would've been very hard (and frustrating), so this is (at least according to me) an acceptable middle-way which I can live it.

_{I must admit that I wasn't a big fan of the pseudo-elements in question when they first appeared.}

Answer 3

The CSS 2.1 spec cited says: “Applies to: :before and :after pseudo-elements”. This restriction has been relaxed in the draft for CSS3 Generated and Replaced Content Module, which is old (2003) and outdated but still partly implemented. Opera seems to support content for normal elements, except for the use of URL values (used to insert images), whereas Chrome and Safari do the same only for URL values. So you code actually works on Safari.

More widespread support is not very likely unless specification work on the module makes some progress. On the W3C CSS module status page, the module is in the “Rewriting” section, with the note “Severely outdated”.