Cascading Style Sheets: The Definitive Guide

Generated Content

Generated content is a new way of adding things to existing content without having to alter the content itself. It’s done by using the pseudo-elements :before and :after and the property content . Here’s a basic example of how it works:

P:before, P:after {content: "\""; color: gray;}

<P>This is a quote.</P>

The browser will display what’s shown in Figure 10-15.

Figure 10-15. Adding generated content

Note that the double-quote mark was escaped out—that is, preceded by a backslash. This is necessary, since text values for content must be enclosed in double quotes. You could also place images before (or after) content, using something like P:before {content: url(para.gif);} to put a paragraph symbol at the beginning of each paragraph. You can even string multiple values together like this (shown in Figure 10-16):

P:before {content: url(para.gif) "—";}

Figure 10-16. Adding an image and text before a paragraph

This would cause each paragraph to be started with a paragraph symbol, a blank space, two dashes, and then another blank space. Note that all of this is considered part of the paragraph and is inlined within it. The spaces appear before and after the double dash because they’re included in the string value. If these spaces were omitted, then space would not appear to ...