🔢 CSS counter-increment: Automatically Number Your Content

Want to create ordered lists, step indicators, or automatically numbered sections without manually adding numbers in your HTML? The CSS counter-increment property lets you increase (increment) counters automatically — perfect for dynamic numbering in your webpage!

---

🧾 What is counter-increment?

counter-increment is a CSS property that increments a named counter by a specified value each time the styled element appears. It’s part of CSS counters — a powerful way to track and display counts on your page using CSS only.

---

🧬 Syntax

selector {
  counter-increment: <counter-name> <integer>;
}

Values:

Value	Description
<counter-name>	The name of the counter you want to increment
<integer>	Optional. How much to increment the counter (default is 1)

---

🎯 How It Works

1. Define a counter with counter-reset.
2. Increment it on elements with counter-increment.
3. Display the counter using the content property and counter() function.

---

🎨 Example: Simple Numbered List Without <ol>

HTML

<div class="steps">
  <div class="step">Step One</div>
  <div class="step">Step Two</div>
  <div class="step">Step Three</div>
</div>

CSS

.steps {
  counter-reset: step-counter; /* Initialize counter */
}

.step {
  counter-increment: step-counter; /* Increase counter by 1 */
}

.step::before {
  content: counter(step-counter) ". ";
  font-weight: bold;
  color: #2a9d8f;
}

Result: Each .step gets numbered automatically (1. Step One, 2. Step Two, etc.) without writing numbers in HTML.

---

🧠 Use Cases

• Automatic numbering for custom lists, steps, or sections
• Dynamic counters in documentation or tutorials
• Generating table row numbers in styled tables
• Custom pagination indicators

---

🛠️ Tips & Tricks

• Combine with counter-reset to start or reset counters as needed.
• You can increment multiple counters in one declaration:

selector {
  counter-increment: counter1 1 counter2 2;
}

• Negative values can decrement counters (use with care).
• Use counters() function for nested counters (like 1.1, 1.2, 2.1).

---

✅ Browser Support

The counter-increment property enjoys excellent support in all major browsers:

• ✅ Chrome
• ✅ Firefox
• ✅ Safari
• ✅ Edge
• ✅ Internet Explorer 8+

---

🔚 Conclusion

CSS’s counter-increment is a simple but powerful tool for adding dynamic numbering to your content without extra HTML or JavaScript. It enhances design flexibility and keeps your markup clean.

---