Numbers From The Stylesheet

counter-reset and counter-increment let CSS number a list with content: counter(x), so the digits live in the stylesheet and not the markup.

In 2026: Alive. This CSS2 feature still works everywhere, and the list below numbers itself with no numerals typed in the HTML. Each item increments a named counter, and the ::before pulls its value in as generated content. The same mechanism drives nested section numbers with counters(x, '.').

Where it came from: CSS2 generated content and automatic counters, W3C 1998. Explained in Eric Meyer, CSS: The Definitive Guide. MDN ↗

<style>
/* Numbering with no numbers in the markup, CSS2 */
ol.steps { list-style: none; counter-reset: step; padding-left: 0; }
ol.steps > li { counter-increment: step; margin: 2px 0; }
ol.steps > li::before {
  content: "Step " counter(step) ": ";
  font-weight: bold;
}
</style>

<ol class="steps">
  <li>Insert coin.</li>
  <li>Press start.</li>
  <li>Blow into the cartridge.</li>
</ol>