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>
Search WWH ::




Custom Search