counter-increment

Definition

The counter-increment CSS property increases or decreases the value of one or more CSS counters. It’s commonly used with the content property to create numbered content or navigation. The property can accept an identifier, which is the name of the counter, and an integer, which indicates by how much the counter should be incremented.

For example, counter-increment: section; will increment a counter named “section” by 1 each time it is invoked.

Syntax

ol.article {
  counter-reset: section;
}

ol.article > li {
  counter-increment: section;
}

Values

• <name> optionally followed by an integer increment (default 1).
• Multiple counters separated by spaces.

Practical Examples

ol.article {
  counter-reset: section;
  list-style: none;
  padding-left: 0;
}

ol.article > li {
  counter-increment: section;
  position: relative;
  padding-left: 2.5rem;
}

ol.article > li::before {
  content: counter(section);
  position: absolute;
  left: 0;
  top: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(59,130,246,0.15);
  color: #1d4ed8;
  font-weight: 600;
}

Increment counters as each list item renders to build custom numbering.

<style>
ol.counter-demo { counter-reset: section; list-style: none; padding-left: 0; }
ol.counter-demo > li { counter-increment: section; position: relative; padding-left: 2.5rem; margin-bottom: 0.75rem; }
ol.counter-demo > li::before { content: counter(section); position: absolute; left: 0; top: 0; width: 2rem; height: 2rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: rgba(59,130,246,0.15); color: #1d4ed8; font-weight: 600; }
</style>
<ol class="counter-demo text-sm text-slate-700">
  <li>Define your section goals.</li>
  <li>Gather requirements from stakeholders.</li>
  <li>Share the plan with the team.</li>
</ol>

Tips & Best Practices

• Reset counters (counter-reset) on the parent before incrementing.
• Use CSS variables to change numbering styles per section.

Accessibility & UX Notes

Pseudo-generated numbers are announced by screen readers when inserted via content.

Browser Support

Supported in modern browsers; IE supports but with older pseudo-element syntax.

Related

• counter-reset
• content
• list-style.