Codectionary / Developer documentation / CSS

Numbering Sections with CSS Counters

CSS counters maintain numbering in the document’s style tree. counter-reset creates or resets a counter, counter-increment advances it, and counter() formats its current value. Generated numbering is useful for presentation, but critical content should remain available in semantic HTML.

Syntax

.guide { counter-reset: section; }
h2 { counter-increment: section; }
h2::before { content: counter(section) ". "; }

Examples

Numbering Sections with CSS Counters: working example

Run this CSS against the example’s own HTML. The explanation describes the expected result.

/* Neutral page for this self-contained document. */
body { color: #182338; background: #fff; }

.guide { counter-reset: section; }
.guide h2 { counter-increment: section; }
.guide h2::before { content: counter(section) ". "; color: #374151; }
  1. Expected result: The headings display 1. Install, 2. Configure, and 3. Run.
  2. The counter belongs to the guide’s scope.
  3. Inserting another h2 automatically adjusts later numbers without changing their text.
HTML used by this example

<div class="guide"><h2>Install</h2><p>Prepare the tools.</p><h2>Configure</h2><p>Choose settings.</p><h2>Run</h2><p>Start the app.</p></div>

Best practices

  • Use ol for actual ordered lists.
  • Do not put essential instructions only in generated content.

Runtime & versions

Web browsers. Feature availability depends on the language and runtime version used by your project; consult the official reference below.

CSS specifications (modules)

Specifications & further reading