Thesymbols()CSS function enables defining counter styles inline, directly as a value of properties such aslist-style, providing a less powerful but simpler alternative to the@counter-style method of defining a counter style.

Unlike@counter-style, which defines a reusable counter style,symbols() isanonymous (i.e., it can only be used once). This function accepts strings and images as values. In comparison, the@counter-style'ssymbols descriptor also accepts identifiers.

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 without0.
• 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.

Formal syntax

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

<symbols-type> =
cyclic|
numeric|
alphabetic|
symbolic|
fixed

<image> =
<url>|
<image()>|
<image-set()>|
<cross-fade()>|
<element()>|
<gradient>

<image()> =
image(<image-tags>?[<image-src>? ,<color>?]!)

<image-set()> =
image-set(<image-set-option>#)

<cross-fade()> =
cross-fade(<cf-image>#)

<element()> =
element(<id-selector>)

<image-tags> =
ltr|
rtl

<image-src> =
<url>|
<string>

<image-set-option> =
[<image>|<string>][<resolution>||type(<string>)]?

<cf-image> =
[<image>|<color>]&&
<percentage [0,100]>?

<id-selector> =
<hash-token>

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

Browser compatibility

See also

• @counter-style descriptors:system,symbols,additive-symbols,prefix,suffix,range,pad,speak-as,fallback
• List style properties:list-style,list-style-type
• CSS counter styles module
• CSS lists and counters module