HTML and CSS Reference
In-Depth Information
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:
h1 {
counter-reset: section;
}
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:
h2::before {
counter-increment: section;
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:
h2 {
counter-reset: subsection;
}
Finally, the
::before
pseudo-element increments the
subsection
counter and displays all three numbers
like this:
h3::before {
counter-increment: subsection;
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.
Tip
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.
