Interview Question

What are CSS counters?

CSS counters generate automatic numbering through reset, increment, and counter().

💡 Concept ✅ Quick Revision 🎨 CSS

Answer

CSS counters are named values that CSS can reset, increment, and display. • counter-reset creates or resets a counter. • counter-increment changes its value. • counter() or counters() can expose the value through generated content.

💡 Simple Example

.steps { counter-reset: step; } .steps > li { counter-increment: step; } .steps > li::before { content: counter(step) ". "; }

⚡ Quick Revision

CSS counters generate automatic numbering through reset, increment, and counter().