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.

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

Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
symbols

See also