CSS Counters

CSS counters are like "variables". The variable values can be incremented (or decremented) by CSS rules.

To work with CSS counters we will use the following properties:

• counter-reset - Creates or resets a counter
• counter-increment - Increments or decrements a counter
• content - Inserts generated content
• counter() - Adds the value of a counter to an element

To use a CSS counter, it must first be created with the counter-reset property.

The following example creates a counter for the page (in the body selector), then it increments the counter value by 1 for each <h2> element:

The counter-increment property has a second parameter. The default value is 1. To decrease the counter value, you can set it to -1.

You can increment the counter by any value. Here we increment by 2: