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

**CSS**

```css
 p:after { content:' Batman!' }

```

**HTML**

```html
<p>Na Na Na Na Na Na</p>

```

**Output in the browser**

```none
Na Na Na Na Na Na Batman!

```

---

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

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

```

**doesn't outputs this**

```none
My hero is Batman!

```

**but instead outputs this ?**

```none
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](http://www.w3.org/TR/css3-content/#inserting3) 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: 
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](http://www.w3.org/TR/css3-content/), 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](http://www.w3.org/Style/CSS/current-work.en.html), the module is in the “Rewriting” section, with the note “Severely outdated”.
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](http://www.w3.org/TR/css3-content/), but we'll have to wait a bit until browser venrors implement it.