HTML and CSS Reference
In-Depth Information
The following code was used to generate
Figure 10.3
and demon-
strates three presentation options that cannot be accomplished with
list-style-type
in current browsers.
■
The list item marker presentation of a number followed by a dot was
customized to be a number followed by a colon.
■
The text containing the counter can be independently styled from the
item content in browsers without
::marker
support.
■
A marker and counter was added to each
h4
element.
h4 { /* increment one counter at each h4 */
counter-increment: heading;
}
h4::before {
content: counter(heading, lower-roman) ": ";
color: #aaa;
}
ol li { /* start a second counter for list items */
list-style-type: none;
counter-increment: item;
}
ol li::before {
content: counter(item) ": ";
color: #aaa;
}
ol { /* reset second counter for each new list */
counter-reset: item;
}
[...]
<h4>Heading</h4>
<h4>Heading</h4>