Abakada: Back to Basics > Language References > CSS Properties > At-Rules > @counterStyle

---

Enables authors to extend predefined list styles.

@counter-style: counter-style-name {

   ... descriptor list ...

}

Parameter	Description	Valid Values
counter-style-name	Provides a name for the custom counter style.	Specified as a case-sensitive custom identifier without quotes.
system	Specifies the algorithm to be used for converting the integer value of a counter to a string representation.	cyclic | numeric | alphabetic | symbolic | additive | fixed [ integer ] | extends [ counter-style-name ]
symbols	Specifies the symbols that are to be used for the marker representations.	string | image | custom-identifier
additive-symbols	Defines the additive tuples for additive systems.	integer [ 0, ∞ ] && string | image | custom-identifier
negative	Specifies whether symbols are appended or prepended to the counter representation.	string | image | custom-identifier
prefix	Specifies a symbol that should be prepended to the marker representation.	string | image | custom-identifier
suffix	Specifies a symbol that comes after the marker representation.	string | image | custom-identifier
range	Defines the range of values over which the counter style is applicable.	integer | infinite {2} | auto
pad	Used when marker representations are to be of a minimum length.	integer [ 0, ∞ ] && string | image | custom-identifier
speak-as	Describes how speech synthesizers, such as screen readers, should announce the counter style.	auto | bullets | numbers | words | spell-out | counter-style-name
fallback	Specifies the counter name of the system to fall back to in case the custom counter style fails.	counter-style-name

The @counter-style at-rule enables authors to extend predefined list styles and define counter styles that are not part of the predefined set of styles.

While CSS provides many useful predefined counter styles, the @counter-style at-rule offers an open-ended method for creating counters that cater to the needs of worldwide typography.

@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: counter-style-name {
   system: ...
   symbols: ...
   additive-symbols: ...
   negative: ...
   prefix: ...
   suffix: ...
   range: ...
   pad: ...
   speak-as: ...
   fallback: ...
}

The following example shows use of applying symbols to a custom counter-style.

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

<ol class="items">
   <li>one</li>
   <li>two</li>
   <li>three</li>
   <li>four</li>
   <li>five</li>
</ol>

which would render as:

NOTE: This section is currently under major reconstruction. Please bear with whatever inconvenience you may encounter; we hope to complete the job at the soonest possible time.

External reference: CSS Counter Styles Level 3   Ready-made Counter Styles