CSS counter-increment

on
The CSS counter-increment property assists in generating automatic numbering (for example, Heading 1, Section 1.1, Heading 2, Heading 2.2 etc) by incrementing the count by a given number. The counter-increment property is used in conjunction with the CSS count() function of the 'content' property (which is used with the ':before' or ':after' pseudo-elements).


Syntax: content: "<string> " counter(<identifier>) " ";
counter-increment: <identifier> <integer>;
Possible Values:
  • none
  • <identifier> <integer>
    The integer indicates how much the count is incremented by. The default is 1. Zero and negative integers are allowed.
  • inherit
Initial Value: None
Applies to: All elements
Inherited: No
Media: All
Example: 
h1:before {
    content: "Section " counter(section) " ";
    counter-increment: section;
}