CSS counter-increment Property

CSS counter-increment Property

The counter-increment property in CSS is used to increase the value of a counter in ordered lists, sections, or any repeating elements. It works with the counter-reset and content properties to create automatic numbering.

1. Syntax

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

Value	Description
counter-name	The name of the counter to increment.
number (optional, default is 1)	The amount by which the counter increases.

✅ Use counter-increment with content: counter(counter-name); in ::before or ::after pseudo-elements to display numbers.

2. Example – Automatic Numbering for Sections

h2 {
  counter-increment: section;
}

h2::before {
  content: "Section " counter(section) ": ";
  font-weight: bold;
}

<h2>Introduction</h2>
<h2>Methods</h2>
<h2>Results</h2>

✅ Outputs:

Section 1: Introduction
Section 2: Methods
Section 3: Results

3. Example – Ordered List with Custom Numbers

ol {
  counter-reset: my-counter;
}

li {
  counter-increment: my-counter;
}

li::before {
  content: counter(my-counter) ". ";
  font-weight: bold;
}

<ol>
  <li>Item One</li>
  <li>Item Two</li>
  <li>Item Three</li>
</ol>

✅ Outputs:

1. Item One
2. Item Two
3. Item Three

4. Example – Custom Counter Increment

p {
  counter-increment: paragraph-counter 2; /* Increment by 2 */
}

p::before {
  content: "Paragraph " counter(paragraph-counter) ": ";
  font-weight: bold;
}

✅ Increments by 2 instead of 1.

5. Best Practices

✔ Always reset counters with counter-reset before using counter-increment.
✔ Use counter-increment: counter-name 2; to skip numbers.
✔ Works best with ::before or ::after for automatic numbering.