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

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”.