Prisma saysCSS counters number things automatically with counter-reset and counter-increment.
CSS can count without JavaScript. counter-reset: step starts a counter, counter-increment: step bumps it per element, and content: counter(step) in a ::before prints it. Perfect for custom-styled ordered lists, numbered headings, or step indicators.
Power-ups you unlock
counter-reset starts; counter-increment bumps
Print with content: counter(name) in ::before
Nest counters for outline numbering (1.1, 1.2)
No JS needed for custom numbering
Jank the Janitor attacks — common mistakes
Forgetting counter-reset on the container
Incrementing on the wrong element
Expecting the number without a ::before
Boss battleNumber a custom list with CSS counters, prefixing each item with "Step N:".