HTML and CSS Reference
This sets the value of the content property to the literal text “Chapter” followed by a space, then the value of
the chapter counter, followed by a colon and another space. The result, as shown in Figures 15-6 and 15-7 , is that
the main heading is prefixed by Chapter 15 : .
The section counter generates the sequence number for the <h2> headings, so it needs to be initialized
before it's used. The <h1> heading comes first, making it the ideal place to create it with the counter-reset
property like this:
Only the counter name has been specified, so counter-reset initializes section at 0 . The ::before
pseudo-element then increments and displays the sequence number like this:
content: counter(chapter) '.' counter(section) ' ';
By default, counter-increment increases the value of a counter by 1. So, the first <h2> heading increments
section to 1 , the next <h2> heading increases it to 2 , and so on. The content property uses the counter()
function twice to display the values of the chapter and section counters. Literal text strings insert a dot between
the numbers and a space after them.
The subsection counter numbers the <h3> headings, which always follow <h2> headings. Because they
represent subsections of the <h2> sections, the counter needs to be created or reset to 0 by each <h2> heading.
So, the counter is initialized and reset like this:
Finally, the ::before pseudo-element increments the subsection counter and displays all three numbers
content: counter(chapter) '.' counter(section) '.' counter(subsection) ' ';
■ When the ::before pseudo-element increments and displays a counter, the counter is always incremented
first. The order of counter-increment and content in the style rule makes no difference.
Changing the Number Style
The counter() function takes an optional second argument: one of the values for list-style-type (see
“Ordered Lists” in Chapter 10 ). Separate the two arguments with a comma.