CSS @counter-style Rule

❮ Previous Reference Next ❯


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

ul {
  list-style: thumbs;


The @counter-style at-rule lets you define counter styles that are not part of the predefined set of styles. A @counter-style rule defines how to convert a counter value into a string representation.

The initial version of CSS defined a set of useful counter styles. However, although more styles were added to this set of predefined styles over the years, this system proved too restrictive to fulfill the needs of worldwide typography.

The @counter-style at-rule addresses this shortcoming in an open-ended manner, by allowing authors to define their own counter styles when the pre-defined styles aren't fitting their needs.

Standard Syntax

@counter-style counter-style-name {

Browser Support

The numbers in the table specify the first browser version that fully supports the property.


Property Values

The following table describes the values of this property.

Value Description
counter-style-name Specifies the list style name.
system Specifies the algorithm to be used for converting the integer value of a counter to a string representation.
negative Lets the author specify symbols to be appended or prepended to the counter representation if the value is negative.
prefix Specifies a symbol that should be prepended to the marker representation.
suffix Specifies, similar to the prefix descriptor, a symbol that is appended to the marker representation. Suffixes come after the marker representation.
range Defines the range of values over which the counter style is applicable.
pad Is used when you need the marker representations to be of a minimum length.
fallback Specifies a system to fall back into if either the specified system is unable to construct the representation of a counter value or if the counter value is outside the specified range.
symbols Specifies the symbols that are to be used for the marker representations.
additive-symbols While the symbols specified in the symbols descriptor is used for constructing marker representation by most algorithms, some systems such as 'additive' rely on additive tuples described in this descriptor.
speak-as Describes how to read out the counter style in speech synthesizers, such as screen readers.

More Example

@counter-style circled-alpha {
  system: fixed;
  symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
  suffix: " ";

ul {
  list-style: circled-alpha;
❮ Previous Reference Next ❯