Widely availableSupported across all major browsers. Safe to use in production.
Typography Widely available

Counters (CSS)

The counter-reset and counter-increment CSS properties and the counter() and counters() functions automatically number headings or ordered list items.

Typography

Overview

The counter-reset and counter-increment CSS properties and the counter() and counters() functions automatically number headings or ordered list items.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
counter-increment
2
12
1
3
18
1
list-item
28
12
1
9
28
9
none
2
12
1
3
18
2
Other
css.properties.counter-reset

The counter-reset CSS property creates named CSS counters and initializes them to a specific value. It supports creating counters that count up from one to the number of elements, as well as those that count down from the number of elements to one.
2
12
1
3
18
1
CSS property
list-item
28
12
1
9
28
9
none
2
12
1
3
18
2
reset does not affect siblings
Experimental

Resets counter on current element (not sibling elements).
82
Other
css.types.counter

The counter() CSS function returns a string representing the current value of the named counter, if there is one.
1
12
1
3
18
1
css.types.counters

The counters() CSS function enables combining markers when nesting counters. The function returns a string that concatenates the current values of the named and nested counters, if any are present, with the string provided. The third, optional parameter enables defining the list style.
1
12
1.5
3
18
1
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • Overriding the initial value of the implicit `list-item` counter has no effect when the default marker string for list items (`::marker`) is generated; see bug 338233131.
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • Overriding the initial value of the implicit `list-item` counter results in incorrect values for the `counter()` function used to generate content, as it is not fully implemented; see bug 260436.
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • Overriding the initial value of the implicit `list-item` counter has no effect when the default marker string for list items (`::marker`) is generated; see bug 338233131.
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • Overriding the initial value of the implicit `list-item` counter results in incorrect values for the `counter()` function used to generate content, as it is not fully implemented; see bug 260436.

Syntax

CSS 
body {
  counter-reset: chapter;
}
h2::before {
  counter-increment: chapter;
  content: 'Chapter ' + counter(chapter);
}

Live demo

chapter number

CSS chapter number demo.

PreviewFullscreen

nestedcounter-

CSS nestedcounter- demo.

PreviewFullscreen

customnumber

CSS customnumber demo.

PreviewFullscreen

Use cases

  • Using Counters (CSS)

    The counter-reset and counter-increment CSS properties and the counter() and counters() functions automatically number headings or ordered list items.

Cautions

  • May not be supported in older browsers.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links

Powered by web-features