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

@counter-style

The @counter-style CSS at-rule sets custom counter styles for list items. For example, you can use a sequence of specific symbols instead of numbers for an ordered list.

Typography

Overview

The @counter-style CSS at-rule sets custom counter styles for list items. For example, you can use a sequence of specific symbols instead of numbers for an ordered list.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
@counter-style
91
91
33
17
91
17
DOM API
CSSCounterStyleRule

The CSSCounterStyleRule interface represents an @counter-style at-rule.
91
91
33
17
91
17
additiveSymbols

The additiveSymbols property of the CSSCounterStyleRule interface gets and sets the value of the @counter-style/additive-symbols descriptor. If the descriptor does not have a value set, this attribute returns an empty string.
91
91
33
17
91
17
fallback

The fallback property of the CSSCounterStyleRule interface gets and sets the value of the @counter-style/fallback descriptor. If the descriptor does not have a value set, this attribute returns an empty string.
91
91
33
17
91
17
name

The name property of the CSSCounterStyleRule interface gets and sets the <custom-ident> defined as the name for the associated rule.
91
91
33
17
91
17
negative

The negative property of the CSSCounterStyleRule interface gets and sets the value of the @counter-style/negative descriptor. If the descriptor does not have a value set, this attribute returns an empty string.
91
91
33
17
91
17
pad

The pad property of the CSSCounterStyleRule interface gets and sets the value of the @counter-style/pad descriptor. If the descriptor does not have a value set, this attribute returns an empty string.
91
91
33
17
91
17
prefix

The prefix property of the CSSCounterStyleRule interface gets and sets the value of the @counter-style/prefix descriptor. If the descriptor does not have a value set, this attribute returns an empty string.
91
91
33
17
91
17
range

The range property of the CSSCounterStyleRule interface gets and sets the value of the @counter-style/range descriptor. If the descriptor does not have a value set, this attribute returns an empty string.
91
91
33
17
91
17
speakAs

The speakAs property of the CSSCounterStyleRule interface gets and sets the value of the @counter-style/speak-as descriptor. If the descriptor does not have a value set, this attribute returns an empty string.
91
91
33
17
91
17
suffix

The suffix property of the CSSCounterStyleRule interface gets and sets the value of the @counter-style/suffix descriptor. If the descriptor does not have a value set, this attribute returns an empty string.
91
91
33
17
91
17
symbols

The symbols property of the CSSCounterStyleRule interface gets and sets the value of the @counter-style/symbols descriptor. If the descriptor does not have a value set, this attribute returns an empty string.
91
91
33
17
91
17
system

The system property of the CSSCounterStyleRule interface gets and sets the value of the @counter-style/system descriptor. If the descriptor does not have a value set, this attribute returns an empty string.
91
91
33
17
91
17
CSS at-rule
additive-symbols

The additive-symbols descriptor of the @counter-style at-rule is used to specify counter symbols when the @counter-style @counter-style/system descriptor value is set as additive. The additive system is used to construct sign-value numbering systems such as Roman numerals.
91
91
33
17
91
17
fallback

The fallback descriptor of the @counter-style at-rule can be used to specify a counter style to fall back to if the counter style being defined cannot create a marker representation for a particular counter value.
91
91
33
17
91
17
negative

The negative descriptor of the @counter-style at-rule lets you define how negative counter values are represented when defining custom counter styles. The value of the negative descriptor defines the symbols to be added before and after the counter representation when the counter's value is negative.
91
91
33
17
91
17
pad

The pad descriptor of the @counter-style at-rule is used to set a minimum length for marker representations.
91
91
33
17
91
17
prefix

The @counter-style rule's prefix descriptor specifies content that will be added to the beginning of the counter's marker representation.
91
91
33
17
91
17
range

The range descriptor lets the author specify one or more ranges of counter values for which the style is applied when defining custom counter styles with the @counter-style at-rule. When the range descriptor is included, the defined counter will only be used for values in the set ranges. If the counter value is outside the specified range, the fallback…
91
91
33
17
91
17
speak-as

The speak-as descriptor specifies how a counter symbol constructed with a given @counter-style will be represented in the spoken form. For example, an author can specify a counter symbol to be either spoken as its numerical value or just represented with an audio cue.
91
91
33
91
suffix

The suffix descriptor of the @counter-style rule specifies content that will be added to the end of the marker representation.
91
91
33
17
91
17
symbols

The symbols CSS descriptor of the @counter-style at-rule is used to specify the symbols for creating counter representations in the specified counter system. Specifying this descriptor is mandatory when the value of the @counter-style/system descriptor is cyclic, numeric, alphabetic, symbolic, or fixed.
91
91
33
17
91
17
system

The system descriptor specifies the algorithm to be used for converting the integer value of a counter to a string representation. It is used in a @counter-style to define the behavior of the defined style.
91
91
33
17
91
17
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
  • Does not support `<image>` as a value for the `symbols` descriptor.
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • Does not support `<image>` as a value for the `symbols` descriptor.
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • Does not support `<image>` as a value for the `symbols` descriptor.
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • Does not support `<image>` as a value for the `symbols` descriptor.

Syntax

CSS 
@counter-style emoji-list {
  system: cyclic;
  symbols: "🔥" "⭐" "💡" "🎯";
  suffix: " ";
}

ul.emoji {
  list-style-type: emoji-list;
}

@counter-style japanese {
  system: fixed;
  symbols: "一" "二" "三" "四" "五";
  suffix: "、";
}

Live demo

emojilist

@counter-style emojilist demo.

PreviewFullscreen

numbercharacterlist

@counter-style numbercharacterlist demo.

PreviewFullscreen

symbollist

@counter-style symbollist demo.

PreviewFullscreen

Use cases

  • Using @counter-style

    The @counter-style CSS at-rule sets custom counter styles for list items. For example, you can use a sequence of specific symbols instead of numbers for an ordered list.

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