@counter-style CSS At-Rule

The @counter-style at-rule allows authors to create named, reusable numbering systems that control how CSS counters and list markers are rendered. Instead of being limited to the built‑in sequencing styles (like decimal, lower-roman, etc.), authors can define a bespoke sequence of symbols and rules that determine how numeric values map to visible tokens. Those named styles can then be applied to ordered lists or inserted into generated content, so the same custom numbering scheme is reused consistently across a document or site.

A custom counter style can express a wide range of behaviors: it can specify the set of symbols used for successive numbers, describe how the sequence repeats or carries over for larger numbers, handle negative values and special ordinal forms, and provide formatting such as padding or grouping. It also supports fallback behavior so that if a number cannot be represented in the custom system the browser can fall back to an alternate rendering. This flexibility makes it possible to implement cultural, typographic, or domain‑specific numbering conventions that aren’t covered by the default list styles.

Practical uses include creating step markers with leading zeros, legal or technical numbering that follows a nonstandard scheme, lists that use language‑specific scripts or custom glyph sequences, and footnote or annotation counters with specialized presentation. Because the style is given a name and applied declaratively, it keeps markup clean and centralizes presentation logic: changing the rule updates every list or counter that references it. It also integrates with generated content and accessibility tooling, helping screen readers and other agents present or fall back from the custom representation in a predictable way.

@counter-style <counter-style-name> {
  [ system: <counter-system>; ] ||
  [ symbols: <counter-symbols>; ] ||
  [ additive-symbols: <additive-symbols>; ] ||
  [ negative: <negative-symbol>; ] ||
  [ prefix: <prefix>; ] ||
  [ suffix: <suffix>; ] ||
  [ range: <range>; ] ||
  [ pad: <padding>; ] ||
  [ speak-as: <speak-as>; ] ||
  [ fallback: <counter-style-name>; ]
}
where 
<counter-style-name> = <custom-ident>

• systemSpecifies the algorithm that will be used to convert the counter's integer value to its string representation.
• negativeAllows the author to specify the characters to be appended or appended to the count representation if the value is negative.
• prefixSpecifies the character to be added before the marker representation. Prefixes are added to the representation at the final stage, so in the final representation of the counter it comes before a negative sign.
• suffixSpecifies, similar to a prefix descriptor, the character that is added to the marker representation. The suffixes come after the presentation marker.
• rangeSpecifies the range of values ​​to which the counter style is applied. If a counter style is used to represent a counter value outside of its ranges, the counter style reverts to its reservation style.
• padUsed when you want marker representations to be of the minimum length. For example, if you want the counters to start at 01 and go through 02, 03, 04, etc., then the descriptor must be used pad. For views larger than the specified value, the marker is built as usual.
• fallbackSpecifies the system to contact if the specified system is unable to generate a representation of the counter value, or if the counter value is outside the specified range. If the specified fallback also fails to represent a value, then the fallback style fallback, if specified, is used. If there are no redundant systems described, or if a chain of redundant systems cannot represent the value of the counter, then it will eventually revert to decimal style.
• symbolsSpecifies the characters to be used for marker representations. Symbols can contain a string, images, or user IDs. How symbols are used to construct the marker representation depends on the algorithm specified in the system descriptor. For example, if the specified system is fixed, then each of the N characters specified in the descriptor will be used to represent the first N characters of the counter. Once the specified character set is exhausted, the rest of the list will use the fallback style.
• additive-symbolsAlthough the characters specified in the character descriptor are used to construct the marker representation by most algorithms, some systems, such as "additive", rely on the additive tuples described in this descriptor. Each additive tuple consists of a counter character and a non-negative integer weight. Additive tuples must be listed in descending order of their weights.
• speak-asDescribes how to read the counter style in speech synthesizers such as screen readers. For example, the value of a marker character can be read as numbers or alphabets for ordered lists, or as beeps for unordered lists, based on the value of this descriptor.

The following information will show you the current browser support for the CSS at-rule @counter-style. Hover over a browser icon to see the version that first introduced support for this CSS at-rule.

This at-rule is supported by all modern browsers.

Desktop

Tablets & Mobile