Generated Content - Beginning CSS3 - page 339

Table 15-1. Generated Content Properties

Property Initial Value Description

content normal Defines the content to be inserted by the pseudo-element.

counter-increment none Increments the specified counter for a numbered sequence. To

increment in steps greater than 1 , also specify an integer.
A negative integer creates a back-counting sequence.

counter-reset none Resets the specified counter or creates it if it doesn't already exist.

By default, counters are initialized at 0 . To specify a different start
value, add an integer after the counter name.

quotes Defines the styles of quotation marks at any number of nested

levels. The default value depends on the browser.

Defining the Content to be Inserted
The content property is extremely versatile. It accepts any of the following values:
none The pseudo-element is not generated .
normal Same as none .

A string: Literal text that is to be inserted.

url() An external resource, usually an image .

A counter: A function that generates a numbered sequence.

attr(x) Use the value of the x attribute in the selected element .
open-quote Insert an opening quote as defined by the quotes property .

close-quote Insert a closing quote as defined by the quotes property .
no-open-quote Omit the opening quote, but move to the next level of nesting .
no-close-quote Omit the closing quote, but move up to the previous level .
Apart from the none and normal keywords, you can combine any of these values as a space-separated list to
create complex content that is injected before or after an element.

Inserting Images and Text
Using the ::before and ::after pseudo-elements to insert images, text, or a combination of the two can be
useful in situations where you need to label elements in a consistent way. For example, throughout this topic
points of interest are highlighted as Notes, Tips, or Cautions. The styles in image_text.html use the following three
classes to mark up paragraphs in a similar way (see Figure 15-1 ):

.note::before {
content: url(images/square gray.gif) ' Note ';
font-weight: bold;