HTML and CSS Reference
In-Depth Information
Figure 15-7.
The sequence updates automatically when a new heading is inserted
The numbers are generated by three counters:
chapter
,
section
, and
subsection
. Counters need to be
initialized before they can be used, so the
chapter
counter is initialized in the
body
style rule like this:
body {
background-color: #FFF;
color: #000;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
counter-reset: chapter 15;
}
This creates a counter called
chapter
, and initializes it at
15
. In most cases, values are incremented before
being displayed. So, you normally initialize the counter at one less than the first number you want to display. In
this instance, however, the chapter number is never incremented, which is why it's initialized at
15
rather than
14
.
The value is displayed by passing the name of the counter to the
counter()
function in the
::before
pseudo-element like this:
h1::before {
content: 'Chapter ' counter(chapter) ': ';
}