W3C CSS2 Cascading Style Sheets, level 2 - instructional media + ...

12 Generated content, automatic numbering,
and lists
Contents
12.1 The :before and :after pseudo-elements . . . . . . . 153 .
12.2 The ’content’ property . . . . . . . . . . . 155 .
12.3 Interaction of :before and :after with ’compact’ and ’run-in’ elements 156 .
12.4 Quotation marks . . . . . . . . . . . . 157 .
12.4.1 Specifying quotes with the ’quotes’ property . . . . 157 .
12.4.2 Inserting quotes with the ’content’ property . . . . 159 .
12.5 Automatic counters and numbering . . . . . . . . 160 .
12.5.1 Nested counters and scope . . . . . . . . 162 .
12.5.2 Counter styles . . . . . . . . . . . 163 .
12.5.3 Counters in elements with ’display: none’ . . . . . 163 .
12.6 Markers and lists . . . . . . . . . . . . 163 .
12.6.1 Markers: the ’marker-offset’ property . . . . . . 164 .
12.6.2 Lists: the ’list-style-type’, ’list-style-image’, ’list-style-position’, and
’list-style’ properties . . . . . . . . . . . . 168 .
In some cases, authors may want user agents to render content that does not
come from the document tree [p. 30] . One familiar example of this is a numbered
list; the author does not want to list the numbers explicitly, he or she wants the
user agent to generate them automatically. Similarly, authors may want the user
agent to insert the word "Figure" before the caption of a figure, or "Chapter 7"
before the seventh chapter title. For audio or braille in particular, user agents
should be able to insert these strings.
In CSS2, content may be generated by several mechanisms:
The ’content’ property, in conjunction with the :before and :after
pseudo-elements.
The ’cue-before’, ’cue-after’ aural properties (see the chapter on aural style
sheets [p. 277] ). When the ’content’ property is combined with the aural
properties they are rendered in the following order: :before, ’cue-before’,
(’pause-before’), the element’s content, (’pause-after’), ’cue-after’, and :after.
Elements with a value of ’list-item’ for the ’display’ property.
Below we describe the mechanisms associated with the ’content’ property.
12.1 The :before and :after pseudo-elements
Authors specify the style and location of generated content with the :before and
:after pseudo-elements. As their names indicate, the :before and :after
pseudo-elements specify the location of content before and after an element’s
document tree [p. 30] content. The ’content’ property, in conjunction with these
pseudo-elements, specifies what is inserted.
153