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”.
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](http://www.w3.org/TR/CSS21/generate.html#propdef-content)
> 
> 
> 
> > 
> > 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.