CSS counter-increment Property

Definition and Usage

The counter-increment property increases or decreases one or more named CSS counters. If you write only a counter name, that counter goes up by 1. A negative integer counts down.

Show the value with content and counter() on ::before or ::after. Use counter-reset for a clear starting value. The initial value is none. It is not inherited.

CSS Syntax

List one or more counter names, each optionally followed by an integer. Omit the integer to add 1.

Property Values

How to Use counter-increment

Reset a counter, increment it on each item, then print it with content.

1. On a parent, set counter-reset: section (or another name).
2. On each child that should advance the count, set counter-increment: section.
3. On ::before (or ::after), set content: counter(section).
4. Change the integer when you need steps of 2, -1, or a freeze with 0.

Live Preview

The same four lines share one counter. Change how much counter-increment adds each time.

CSS Examples

Each snippet shows only what the counter needs: reset, increment, and content. Use Try It Yourself for a live editor.

<style>
  body {
    counter-reset: section;
  }

  h2 {
    counter-increment: section;
  }

  h2::before {
    content: counter(section) ". ";
  }
</style>

<h2>Intro</h2>
<h2>Setup</h2>
<h2>Next steps</h2>

<style>
  body {
    counter-reset: section;
  }

  h2 {
    counter-increment: section 2;
  }

  h2::before {
    content: counter(section) ". ";
  }
</style>

<h2>Even A</h2>
<h2>Even B</h2>
<h2>Even C</h2>

<style>
  body {
    counter-reset: section 4;
  }

  h2 {
    counter-increment: section -1;
  }

  h2::before {
    content: counter(section) ". ";
  }
</style>

<h2>Three</h2>
<h2>Two</h2>
<h2>One</h2>

Key Takeaways