From Jennifer Kyrnin,
Your Guide to Web Design / HTML.
FREE Newsletter. Sign Up Now!

Cascading Style Sheets level 2 (CSS2) provides Web developers with a convenient way to generate content for their Web pages without having that content stored in the document tree. This is intended for:

• bullets
• separator iconography
• numbering, such as chapters, lists, or pages

Note: Before you start playing with these classes, you should be aware that they are not supported by Internet Explorer.

:before and :after Pseudo-Elements

These pseudo-elements work on other elements in the style sheet to determine the location of any generated content. As you might guess :before places the content before the element and :after places it after.

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

view

With these pseudo-elements, the non-inherited properties take their initial or default values. The most common use of this is with display. Display has the default value of in-line, but for a lot of generated content, you want it to be a block element. For example, if you wanted to put a graphical element between sections on a page, you might write:

div.section:after {
content: "* * *";
display: block;
text-align: center;
}

view

Generating Content

Once you have the :before and :after pseudo-elements, you need to determine what content you're going to generate. The three most common types of content you might generate are:

• A string of characters: any grouping of characters you want to include.
• A url pointing to an image.
• Quotation marks: either open quotes or closed quotes.

To include a string, just include the text you want generated in quotes:

p:after { content: "The End"; }

view

If you want to include quotes in your content, escape them with the back-slash: \".

To include an image, use the call url(URI to image):

p:before { content: url(../graphics/ball.gif); }

view

Finally, to include quotation marks you use the terms open-quote and close-quote:

q:before { content: open-quote; }
q:after { content: close-quote; }

view