List - CSS Quick Syntax Reference Guide - page 93

Another counter can be added to also enumerate <h2> subheadings. This counter is
here reset to zero at every <h1> element:
h2:before {
content: counter(chapter) "." counter(section) " ";
counter-increment: section;
}
h1 { counter-reset: section; }
The following example illustrates how the counters are displayed:
<h1>Head</h1> <!-- Chapter 1 - Head -->
<h2>Sub</h2> <!-- 1.1 Sub -->
<h2>Sub</h2> <!-- 1.2 Sub -->
<h1>Head</h1> <!-- Chapter 2 - Head -->
<h2>Sub</h2> <!-- 2.1 Sub -->
Nesting counters
CSS counters can be nested any number of levels deep. These nested counters can be
combined and displayed using a CSS function called counters() . The function's first
argument is the counter name, and the second is a string that separates each counter.
ul { counter-reset: item; }
li:before {
content: counters(item, ".") " ";
counter-increment: item;
}
These rules apply to the following unordered lists (note that a new counter instance
is automatically created for every nested list):
<ul>
<li>item</li> <!-- 1 item -->
<li>item</li> <!-- 2 item -->
<ul>
<li>item</li> <!-- 2.1 item -->
<li>item</li> <!-- 2.2 item -->
</ul>
</ul>
Counters are supported in all major browsers, including all versions of Chrome,
Firefox, Safari, and Opera, as well as IE8+.