Cascading Style Sheets - HTML and XHTML: The Definitive Guide - page 522

authors the ability to create arbitrary content, numbered lists, and all
sorts of element-based content.
The foundation of the CSS2 generated-content model is the content and
quotes properties, along with the :before and :after pseudoelements.
You use the former to define the content you need, and use the latter to
position that content with respect to the elements in your document.
8.4.11.1. The :before and :after pseudoelements
We introduced you to pseudoelements earlier in this chapter, and you
even saw some in action (refer to Figures 8-2 and 8-3 ) . The :before and
:after pseudoelements operate similarly. Append either to a style-ele-
ment selector to select and specify the content and properties of gener-
ated content in your document. In general, any content created within
these pseudoelements inherits the display attributes of the parent ele-
ment, such that fonts, sizes, and colors applied to an element are also
applied to its generated content. For example:
p.note { color : blue }
p.note:before { content : "Note: " }
This style example inserts the word Note: before every <p class=note>
element. The inserted text is rendered in blue, like the rest of the para-
graph. Replacing it with this style would color the inserted text red, and
the remainder of the note would be blue:
p.note:before {content : "Note: "; color : red}
Any generated content, before or after an element, is included in the
box of an element and affects its formatting, flow, size, and layout.