@counter-style
Spec The @counter-style rule allows authors to define a custom counter style. The components of a counter style are specified by descriptors in the @counter-style rule. The algorithm is specified implicitly by a combination of the system, symbols, and additive-symbols properties.
MDN 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.
@counter-style circled-alpha {
system: fixed;
symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
suffix: " ";
}
.items {
list-style: circled-alpha;
}<ol class="items">
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
</ol>
<p>...</p>
<ol class="items" start="25">
<li>twenty-five</li>
<li>twenty-six</li>
<li>twenty-seven</li>
<li>twenty-eight</li>
</ol>Syntax
@counter-style <counter-style-name> { <declaration-list> }Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
Browser support
| Chrome | 91 |
|---|---|
| Edge | 91 |
| Firefox | 33 |
| Safari | 17 |
| Chrome Android | 91 |
| Safari iOS | 17 |
First version with support, from MDN browser-compat-data.
Descriptors
additive-symbols-
[ <integer [0,∞]> && <symbol> ]#Initial:n/a fallback-
<counter-style-name>Initial:decimal negative-
<symbol> <symbol>?Initial:"-" pad-
<integer [0,∞]> && <symbol>Initial:0 "" prefix-
<symbol>Initial:"" range-
[ [ <integer> | infinite ]{2} ]# | autoInitial:auto speak-as-
auto | bullets | numbers | words | spell-out | <counter-style-name>Initial:auto suffix-
<symbol>Initial:". " symbols-
<symbol>+Initial:n/a system-
cyclic | numeric | alphabetic | symbolic | additive | [fixed <integer>?] | [ extends <counter-style-name> ]Initial:symbolic