↑ arvau

MDN / symbols() CSS function

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

Unlike , 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 ’s symbols 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 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

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