The @counter-style
CSS at-rule lets authors define specific 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.
Initial version of CSS defined a set of useful counter styles. Although more styles were added to this set of predefined styles over the years, this restrictive way proved unable 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.
Each @counter-style
is identified by a name and has a set of descriptors.
system
negative
prefix
suffix
range
pad
fallback
symbols
@counter-style
rule uses images instead of character symbols.@counter-style winners-list { system: fixed; symbols: url(gold-medal.svg) url(silver-medal.svg) url(bronze-medal.svg); suffix: " "; }
additive-symbols
speak-as
@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>
@counter-style circled-alpha { system: fixed; symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ; suffix: " "; }
The above counter style rule can be applied to lists like this:
.items { list-style: circled-alpha; }
Which will produce lists like this:
Ⓐ One
Ⓑ Two
Ⓒ Three
Ⓓ Four
Ⓔ FIve
....
...
Ⓨ Twenty Five
Ⓩ Twenty Six
27 Twenty Seven
28 Twenty Eight
29 Twenty Nine
30 Thirty
Checkout more examples on the demo page.
Specification | Status | Comment |
---|---|---|
CSS Counter Styles Level 3 The definition of 'counter-style' in that specification. | Candidate Recommendation | Initial definition. |
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | No support | 33 (33)[1] | No support | No support | No support |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | No support | 33 (33)[1] | No support | No support | No support |
[1] Gecko does not support images for the symbols
descriptor yet. See bug 1024179.
list-style
, list-style-image
, list-style-position
symbols()
, the functional notation creating anonymous counter styles.
© 2005–2017 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style