CSS Counters

CSS counters are an implementation of automatic counters and numbering in CSS 2.1. The value of a counter is manipulated through the use of  and   and is displayed on a page using the   or   function of the   property.

Usage
To use a CSS counter, it must first be reset to a value,  by default. To add the value of a counter to an element, use the  function. The following example adds to the beginning of each  element "Section :".

Nesting
A CSS counter can be especially useful to make outlined lists because a new instance of a CSS counter is automatically created in child elements. Using the  function, a string can be inserted between different levels of nested counters:

Applied to the following HTML: