CSS counter-increment Property

What You’ll Learn

The counter-increment property increases a CSS counter — useful for automatic section numbers, custom lists, and step indicators.

Definition and Usage

The counter-increment CSS property increases the value of a CSS counter. Counters are variables maintained by CSS whose values can be incremented or decremented by CSS rules. They are useful for creating complex lists, numbering headings, and other content that requires incremental numbering.

Typically you combine three pieces: counter-reset to initialize, counter-increment on elements that should advance the count, and content: counter(name) in a pseudo-element to show the number.

📝 Syntax

The syntax lets you specify the counter name and how much to increment:

selector {
  counter-increment: counter-name increment-value;
}

Basic Example

body {
  counter-reset: section;
}

h2::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}

Syntax Rules

• The initial value is none — no counter is incremented.
• Omitting the increment amount defaults to 1.
• Counter names are custom identifiers like section or item.
• Use negative values to decrement: counter-increment: step -1;.
• Works with counter-reset and content: counter().

💎 Property Values

The counter-increment property accepts a counter name and optional integer step.

The CSS Counter System

Examples Gallery

Try numbered sections, custom list counters, step-by-two numbering, and nested chapter counters.

<style>
  body {
    counter-reset: section;
  }
  h2::before {
    counter-increment: section;
    content: "Section " counter(section) ": ";
  }
</style>

<h2>Introduction</h2>
<h2>Usage</h2>
<h2>Conclusion</h2>

.steps {
  list-style: none;
  counter-reset: step;
  padding-left: 0;
}

.steps li {
  counter-increment: step;
}

.steps li::before {
  content: counter(step) ". ";
  font-weight: bold;
  color: #2563eb;
}

.even-steps li {
  counter-increment: even 2;
}

.even-steps li::before {
  content: "Step " counter(even) ": ";
}

.outline {
  counter-reset: chapter;
}

.outline h2 {
  counter-increment: chapter;
  counter-reset: section;
}

.outline h2::before {
  content: "Chapter " counter(chapter) ": ";
}

.outline h3 {
  counter-increment: section;
}

.outline h3::before {
  content: counter(chapter) "." counter(section) " ";
}

💡 Best Practices