before and after

The :before and :after pseudo-elements allow you to put generated content before or after the content of a tag. You use them with the content property which you to define the content that you want to insert before or after a tag. Content can be text, pictures, counters and quotation marks.

These pseudo-classes only specify the location of the content, not the content itself. You tell the browser what to insert using the content property.

For example, you can make the browser display a picture at the start of every first level heading:

h1.before {content: url(head.gif);}

You can add a text string before every paragraph. In this example, the word Note: appears before every paragraph with the class note:

p.note:before {content: "Note: ";}

You can add a chapter number before an <h1> tag:

h1:before {content counter(chapno, upper-roman);}

You can add red quote marks before every <q> tag:

q:before {content: open-quote; color:red}

You can combine these pseudo-elements with first-letter or first-line. For example:

p.special:before {content: "Special! ";}
p.special:first-letter {color: #ffd800;}

This will display the letter S of special in gold. (Well, it would if it worked).

The browser formats the inserted content as if it were part of the tag itself. If the tag is a block tag, it becomes part of the block. Generated content for inline elements remains inline.

For example:

b:before { content : "!" }
b:after  { content : "!" }

This inserts exclamation marks before and after bold tags without otherwise interrupting the surrounding flow.

You can alter this behavior slightly for block tags by adding the display property. This means you can make the inserted content act as a block or marker tag preceding the tag. For example:

h1:before { content : "Note: ";
            display : block }
h1:after  { content : " -- end -- ";
            display : block }

In this case, the browser displays the inserted content as a standalone block before and after the contents of the <h1> tag.