@counter-style

An at-rule that lets you create your own custom numbering systems (like using emojis or Roman numerals) for list bullets and counters.

Quick example

@counter-style thumb {
  system: cyclic;
  symbols: 👍;
  suffix: " ";
}

ul {
  list-style: thumb;
}

@counter-style Browser Support

Widely availableSince 202393% global usage

This feature is well established and works across many devices and browser versions. It has been available across browsers since 2023.

Safe to use without fallbacks.

91+
33+
17+
91+
ESC