Newly availableUseful when counter-set affects readability, line flow, or typographic consistency. Treat it as a content-facing choice, not just decoration.
Typography Newly available

counter-set

The counter-set CSS property creates (and optionally sets a value for) a counter, the numbers for a series of headings or ordered list items.

Typography

Overview

The counter-set CSS property creates (and optionally sets a value for) a counter, the numbers for a series of headings or ordered list items.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
counter-set
85
85
68
17.2
85
17.2
list-item
85
85
68
17.2
85
17.2
none
85
85
68
17.2
85
17.2
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
.restart-at-10 {
  counter-set: section 10;
}
.restart-at-10 ~ section::before {
  content: counter(section) '. ';
  counter-increment: section;
}

Live demo

10 from start

CSS 10 from Start demo.

PreviewFullscreen

middle in reset

CSS middle in reset demo.

PreviewFullscreen

100 from start

CSS 100 from Start demo.

PreviewFullscreen

Use cases

  • Reading rhythm

    Use counter-set to improve how text wraps, aligns, or scales in dense layouts and editorial UI.

  • Language-aware text

    Adjust typography when script direction, spacing, or writing rules differ across languages.

Cautions

  • Test with real content rather than short placeholder strings because typographic behavior changes with length and language.
  • Prefer the smallest rule that solves the layout problem so text remains easy to maintain.

Accessibility

  • Typography choices should preserve readability at high zoom and on narrow screens.
  • Avoid stylistic settings that reduce comprehension or make scanning harder.

Related links

Powered by web-features