HTML and CSS Reference
In-Depth Information
Chapter 15
Generated Content
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
speech bubbles.
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.
Note
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.
