CSS Counter Feature

The CSS counter feature generates numeric content. To create a counter, you use the counter-reset property and define the variable name for the counter:

counter-reset: myCounter;

By default, the counter is set to 1. A initial value can be set by adding a number after the counter name:

counter-reset: myCounter 10;

To define multiple counters, add the names and optional initial values to the same counter-reset declaration:

counter-reset: myCounter 10 othercounter;

The code above creates a counter called myCounter with an initial value of 10 and a counter called othercounter with an initial value of 1.

 
<!DOCTYPE HTML> 
<html> 
    <head> 
        <title>Example</title> 
        <style type="text/css"> 
        body { 
            counter-reset: myCounter; 
        } 
        p:before { 
            content: counter(myCounter) ". "; 
            counter-increment: myCounter; 
        } 
        </style> 
    </head> 
    <body> 

        <p>CSS</p> 
        <p>HTML</p> 

    </body> 
</html>

Click to view the demo

The counter value default format is like:

1, 2, 3, ...

Other numeric formats can be defined as :


content: counter(myCounter, lower-alpha) ". ";

lower-alpha is the style you want to use.

The style value is the same with the list-style-type property.

Counters are incremented by one by default. To specify a different increment:


counter-increment: myCounter 2;