counter-increment

The counter-increment property increases or decreases the value of one or more CSS counters.

Syntax

This property is usually used in conjunction with the counter-reset property and the content property.

body {
  counter-reset: my-counter;
}

div.ex:before {
  counter-increment: my-counter;
  content: "Section " counter(my-counter) ". ";
}

Values

none
Default value. No counters will be incremented.

id number
id designates which counter to increment. number designates the value that the counter is incremented to on each occurrence of the selector. number‘s default value is 1 and negative values are allowed. If the id refers to a counter that has not been initialized by counter-reset, the default initial value is 0.

initial
Sets the property to its default value.

inherit
Inherits this property’s value from its parent item.

Browser Compatibilty

Demos

Have a code example of counter-increment? Submit a codepen.io demo and we'll showcase it here ↴