The symbols() CSS function lets you define counter styles inline, directly as the value of a property such as list-style. Unlike @counter-style, symbols() is anonymous (i.e., it can only be used once). Although less powerful, it is shorter and easier to write than @counter-style.

symbols() = symbols( <symbols-type>? [ <string> | <image> ]+ ); 

symbols()

The symbols() CSS function lets you define counter styles inline, directly as the value of a property such as list-style. Unlike @counter-style, symbols() is anonymous (i.e., it can only be used once). Although less powerful, it is shorter and easier to write than @counter-style.

Syntax

symbols() = symbols( <symbols-type>? [ <string> | <image> ]+ ); 

<symbols-type> can be one of the following:

cyclic: The system cycles through the given values in the order of their definition, and returns to the start when it reaches the end. numeric: The system interprets the given values as the successive units of a place-value numbering system. alphabetic: The system interprets the given values as the digits of an alphabetic numbering system, like a place-value numbering system but without 0. symbolic: The system cycles through the values, printing them an additional time at each cycle (one time for the first cycle, two times for the second, etc.). fixed: The system cycles through the given values once, then falls back to Arabic numerals.

Examples

HTML

<ol>   <li>One</li>   <li>Two</li>   <li>Three</li>   <li>Four</li>   <li>Five</li> </ol> 

CSS

ol {   list-style: symbols(cyclic "*" "†" "‡"); } 

Result

Specifications

Specification
CSS Counter Styles Level 3 # symbols-function

See also

@counter-style list-style-type and the corresponding shorthand list-style.

Last modified: Aug 12, 2021, by MDN contributors