counter-increment

counter-increment adds an integer amount to a named CSS counter for the selected element. Omit the amount to add 1; use a negative amount to subtract.

Increment by two

The container starts the counter at zero. Each paragraph adds 2 before displaying the result, giving 2, 4, and 6.

<div class="group">
  <p>First sample</p>
  <p>Second sample</p>
  <p>Third sample</p>
</div>

.group {
  counter-reset: demo 0;
}
.group p {
  counter-increment: demo 2;
}
.group p::before {
  content: counter(demo) " — ";
}

Subtract from an explicit starting value

Starting at 4 and subtracting 1 yields 3, 2, and 1. These are decorative demonstration labels rather than essential instructions.

<div class="group">
  <p>First sample</p>
  <p>Second sample</p>
  <p>Third sample</p>
</div>

.group {
  counter-reset: demo 4;
}
.group p {
  counter-increment: demo -1;
}
.group p::before {
  content: counter(demo) " — ";
}

Values and defaults

The initial value is none and the property is not inherited. A list of counter-name/integer pairs is space-separated. None performs no increments for the selected element; counter-increment:demo 0 leaves that specific counter unchanged. Referencing a nonexistent counter can instantiate it, but an explicit counter-reset container makes the intended scope clearer.

Common mistakes

A later declaration replaces the increment list rather than appending to it. Resetting on every item defeats a sequence. Generated counter text is not guaranteed to be announced consistently by every assistive-technology combination. Use ol for essential ordered steps and preserve a real list’s semantic numbering when customizing markers.

Learn counter-reset, counter-set, and content.

Sources and browser support

MDN: counter-increment describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.