counters()

Numbering the browser keeps for you

Caveatcounter-reset creates a fresh counter scoped to the element, even when one with that name already exists above it. That is why the nested list above counts 2.1, 2.2 instead of 3, 4, and why a reset halfway down a list starts a nested copy where you expected the count to restart. Hiding changes the count as well: an item with display: none is skipped, one with visibility: hidden still counts, so two ways of hiding a step give two different numberings. The accessibility catch is in the markup. Numbers drawn by ::before are paint, and list-style: none makes VoiceOver stop announcing the list as a list, so keep the <ol> and add role="list" back if you strip its style.

FallbackCounters have worked in every engine since CSS 2.1. A reader without your stylesheet still gets numbers from a plain <ol>, which numbers itself with no CSS at all. Counters earn their keep when the numbering has to cross elements an <ol> cannot wrap, such as chapter headings or figure captions, or has to read 2.1 instead of 1.

ol {
  list-style: none;
  /* a fresh counter per scope:
     nesting is what makes the
     2.1 form possible at all */
  counter-reset: sec;
}
li::before {
  counter-increment: sec;
  content: counters(sec, ".") " ";
}

Published 14 Sep 2026