With the pseudo-elements :after and :before it is possible to specify the location of some content before or after an element that already exists in the document.

These elements work in combination with the content property that further specifies what is being inserted.

The :after and :before pseudo-elements inherit all inheritable properties from the element to which they are originally attached while the non-inheritable properties take their initial values.

Both pseudo-elements interact with other boxes as if they were real elements belonging to their associated element, as shown in the sample below.

The code:

p:after { display: block; content: 'in this paragraph'; }

<p>Some text </p>

would be rendered like this:

span { display: block; }

<p>Some text <span>in this paragraph</span></p>

Please note that Internet Explorer 8.0 requires DOCTYPE to be declared in order to respect the counter related CSS code.

Example

Example with CSS pseudo-elements :before and :after:

 

›› go to examples ››