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:"; }
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;
}
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"; }
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); }
Finally, to include quotation marks you use the terms open-quote and close-quote:
q:before { content: open-quote; }
q:after { content: close-quote; }
