CSS Counters

Subject: css

CSS Counters

CSS Counters are a feature that allows you to auto-number elements using only CSS. This is useful for numbering lists, sections, steps, or headings dynamically—without needing to type numbers into the HTML.

Key Properties

  • counter-reset: Initializes or resets a counter.
  • counter-increment: Increases the counter value.
  • content: counter(...): Displays the counter using ::before or ::after pseudo-elements.

Basic Syntax

🚀 Try it in Compiler

Example: Auto-Numbered List

🚀 Try it in Compiler

Example: Nested Counters

🚀 Try it in Compiler

Use Cases

  • Auto-numbered steps or instructions
  • Numbering sections, chapters, or headings
  • Dynamic list item numbering without <ol>
  • Creating document-style layouts

Key Takeaways

  • CSS Counters allow dynamic numbering through styling only
  • Use counter-reset and counter-increment with ::before
  • Ideal for steps, lists, and content that may grow
  • Makes HTML cleaner and easier to maintain
  • Great for visual formatting without semantic changes
Next: CSS Tooltips