symbols()

The symbols() CSS function enables defining counter styles inline, directly as a value of properties such as list-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() is anonymous (i.e., it can only be used once). This function accepts strings and images as values. In comparison, the @counter-style's symbols descriptor also accepts identifiers.

Syntax

css
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.

Formal syntax

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

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

<image> =
<url> |
<gradient>

<url> =
<url()> |
<src()>

<url()> =
url( <string> <url-modifier>* ) |
<url-token>

<src()> =
src( <string> <url-modifier>* )

Examples

HTML

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

CSS

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

Result

Specifications

Specification
CSS Counter Styles Level 3
# symbols-function

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
symbols()

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

See also