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.

        <style type="text/css"> 
        body { 
            counter-reset: myCounter; 
        p:before { 
            content: counter(myCounter) ". "; 
            counter-increment: myCounter; 


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;
  HTML CSS Book 

Pseudo Selectors:
  1. ::first-line Selector
  2. ::first-letter Selector
  3. :before Selector
  4. :after Selector
  5. CSS Counter Feature
  6. :root Selector
  7. Child Selectors
  8. :first-child Selector
  9. :last-child Selector
  10. :only-child Selector
  11. :only-of-type selector
  12. :nth-child(n)
  13. :nth-last-child(n)
  14. :nth-of-type(n)
  15. :nth-last-of-type(n)
  16. Enabled Elements with :enabled
  17. Disabled Elements with :disabled
  18. Checked Elements with :check
  19. Default Elements with :default
  20. Valid Elements with :valid
  21. Invalid input Elements with :invalid
  22. :in-range selector
  23. :out-of-range selector
  24. :required selector
  25. :optional selector
  26. :link selector matches hyperlinks.
  27. :visited selector matches visited hyperlinks.
  28. :hover Selector
  29. :active Selector
  30. :focus Selector
  31. Negation Selector not
  32. :empty Selector
  33. :lang Selector
  34. :target Selector