HTML and CSS Reference
In-Depth Information
Using Separate Counters
Rather than explaining the theory in a vacuum, let's walk through an actual example. The
<h1>
,
<h2>
, and
<h3>
headings in numbered_headings.html are numbered in sequence, as shown in Figure
15-6
.
Figure 15-6.
The numbers alongside each heading are generated automatically
Because the numbers are generated and inserted by the
::before
pseudo-element, the sequence
automatically updates when a new heading is added in numbered_headings_add.html (see Figure
15-7
).