HTML and CSS Reference
What CSS means by generated content is content that's not physically present in the HTML markup. For
example, when you create an ordered list, the numbers are not in the HTML. The browser generates and inserts
them automatically, and it updates the sequence if items are added or removed. The ::before and ::after
pseudo-elements perform a similar function, but go much further, allowing you to add just about any type of
automatically generated content not only before list items, but before and after almost any HTML element.
The ::before and ::after pseudo-elements have been around for a long time. They're part of the CSS2.1
specification (prefixed with a single colon rather than two), but Internet Explorer didn't support them until IE 8.
So, they went largely unnoticed. Now, they're widely used for creating fun visual effects, such as ribbons and
In this chapter, I'll show you how to use the pseudo-elements to add text, images, and visual effects to
various HTML elements, as well as how to generate complex numbered sequences.
In particular, you'll learn how to do the following:
Automatically prefix elements with text and images
Extract the URL from a link and display it in the text
Generate nested quotation marks in a predefined sequence
Generate numbered sequences for page sections and lists
Create ribbon and speech bubble effects without images
■ The code examples in this chapter use the CSS3 syntax, which is supported by the latest versions of all
browsers. If you need to support IE 8, use the CSS2.1 single-colon versions ( :before and :after ) instead.
Inserting Generated Content
To add generated content to elements other than list items, you need to use the ::before or ::after
pseudo-elements. As their names suggest, they insert content before or after an element. The inserted content
is generated by one or more of the properties in Table 15-1 .
The properties in Table 15-1 are not inherited, but they accept the inherit keyword as a value.