@counter-style

Baseline 2023 *

Newly available

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

* Some parts of this feature may have varying levels of support.

The @counter-style CSS at-rule lets you extend predefined list styles and define your own counter styles that are not part of the predefined set of styles. The @counter-style rule contains descriptors defining how the counter value is converted into a string representation.

While CSS provides many useful predefined counter styles, the @counter-style at-rule offers an open-ended method for creating counters. This at-rule caters to the needs of worldwide typography by allowing authors to define their own counter styles when the predefined styles don't fit their requirements.

Syntax

css

@counter-style thumbs {
  system: cyclic;
  symbols: "\1F44D";
  suffix: " ";
}

The @counter-style at-rule is identified by a counter style name, and the style of the named counter can be fine-tuned using a <declaration-list> consisting of one or more descriptors and their values.

Counter style name

<counter-style-name>: Provides a name for your counter style. It is specified as a case-sensitive <custom-ident> without quotes. The value should not be equal to none. Like all custom identifiers, the value of your counter style can't be a CSS-wide keyword. Avoid other enumerated CSS property values, including values of list and counter style properties. The name of your counter can't be the case-insensitive