The After Pseudo-Element

The After pseudo-element allows you to append specified content after the target, and to style that content.

General Syntax for the After Pseudo-Element

element:after { content: content; style declarations... }

This selector is not supported in Windows IE 6 or below.

Content specified in the declaration block can be text or an image. Text is taken literally, so you cannot include HTML entities in the content as they will simply be displayed as the HTML entity code; e.g. — will literally be displayed as —.

This example illustrates how to use the :AFTER pseudo-element, specifying an image in one paragraph, and text in the next.

Example Style sheet

p:after {
   content: url(images/logo-reader.gif);
   border: none;
   }
 
p+p:after {
   content: " - The End!";
   color: #960;
   font-size: large;
   font-weight: bold;
   font-style: italic;
   }

Example Markup

<p>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  Donec iaculis felis. Sed pulvinar diam et nulla. Praesent
  mauris risus, lacinia in, consequat et, adipiscing ut, leo.
  Morbi neque ante, pharetra et, pulvinar ac, facilisis a,
  augue.
</p>
<p>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  Donec iaculis felis. Sed pulvinar diam et nulla. Praesent
  mauris risus, lacinia in, consequat et, adipiscing ut, leo.
  Morbi neque ante, pharetra et, pulvinar ac, facilisis a,
  augue.
</p>

Rendered Example

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis felis. Sed pulvinar diam et nulla. Praesent mauris risus, lacinia in, consequat et, adipiscing ut, leo. Morbi neque ante, pharetra et, pulvinar ac, facilisis a, augue.

Resources

The following are links to the W3C's specifications. They are refreshingly easy to understand!

HTML 4.01 Index of Elements
HTML 4.01 Index of Attributes
CSS 2.1 Selectors Table Of Contents

Pseudo-Elements