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

counter-set

The counter-set CSS property sets CSS counters on the element to the given values.

If the counters don't exist the counter-set property creates a new counter for each named counter in the list of space-separated counter and value pairs. However, to create a new counter it is recommended to use the counter-reset CSS property.

If a named counter in the list is missing a value, the value of the counter will be set to 0.

Note: The counter's value can be incremented or decremented using the counter-increment CSS property.

Typography

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