symbols

The symbols descriptor is specified as one or more <symbol>s.

<symbol>

Represents a symbol used within the counter system. This must be one of the following data types:

• <string>
• <image> (Note: This value is "at risk" and may be removed from the specification. It is not yet implemented.)
• <custom-ident>

A symbol can be a string, image, or identifier. It is used within the @counter-style at-rule.

symbols: A B C D E;
symbols: "\24B6" "\24B7" "\24B8" D E;
symbols: "0" "1" "2" "4" "5" "6" "7" "8" "9";
symbols: url('first.svg') url('second.svg') url('third.svg');
symbols: indic-numbers;

The symbols descriptor must be specified when the value of the system descriptor is cyclic, numeric, alphabetic, symbolic, or fixed. When the additive system is used, use the additive-symbols descriptor instead to specify the symbols.

<symbol>+

<symbol> =
  <string>       |
  <image>        |
  <custom-ident>

HTML

<ul class="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

CSS

@counter-style symbols-example {
  system: fixed;
  symbols: A "1" "\24B7" D E;
}

.list {
  list-style: symbols-example;
}

Result

• The symbols descriptor is used within the @counter-style at-rule.
• list-style, list-style-image, list-style-position
• symbols(), the functional notation creating anonymous counter styles
• url() function