@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

Newly available Since 2023 93% global usage

Since 2023 this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Works in all modern browsers. May need a fallback for older browsers.

91+
33+
17+
91+
ESC