Summary
The symbols()
function allows counter styles to be defined inline, directly as the value of the CSS property. Unlike styles defines with @counter-style
, these styles are anonymous. The symbols()
function doesn't have all the capabilities and options of the @counter-style
at-rule, but is useful in cases such as when the style is used only once and you don't need all the the options provided by @counter-style
.
Syntax
symbols() = symbols( <symbols-type>? [ <string> | <image> ]+ );
<symbols-type>
is one of the following keyword:
cyclic
, meaning that the system repeatedly goes through the different values, in the order of their definition and in an endless cycle.numeric
, meaning that the system interprets the given values as the successive units of a place-value numerical system.alphabetic
, meaning that the system interprets the given values as the digits of an alphabetic numbering system, as a place-value numerical system, but without0
.symbolic
, meaning that the system cycles through the values, printing them one more time at each cycle (one time for the first cycle, two times for the second, …).fixed
, meaning that the system prints each symbol once, then falls back to arab numericals.
Example
ol { list-style: symbols(cyclic "*" "\2020" "\2021"); }
The above example code will render a list like this:
- * One
- † Two
- ‡ Three
- * Four
- † Five
Specifications
Specification | Status | Comment |
---|---|---|
CSS Counter Styles Level 3 The definition of 'symbols()' in that specification. |
Working Draft | Initial defintion |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | Not supported | 35 (35) | Not supported | Not supported | Not supported |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | Not supported | 35.0 (35) | Not supported | Not supported | Not supported |
See also
@counter-style
list-style-type
and the corresponding shorthandlist-style
.