symbols

Summary

The symbols descriptor is used to specify the symbols that the specified counter system will use to construct counter representations. A symbol can be a string, image, or identifier. 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, the additive-symbols descriptor is used to specify the symbols.

The possible values of the symbols descriptor include:

• Strings - sequence of characters enclosed in single or double quotes. Backslash (\) can be used to escape special characters. For example, Unicode characters can be specified in the format "\24B6".
• Images - In the format url(path-to-image.png)
• Identifiers

Syntax

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;

Values

<symbol>

Represents a <symbol> used within the counter system.

Formal syntax

<symbol>+
where 
<symbol> = <string> | <image> | <ident>

Example

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

Specifications

Browser compatibility

See also

• list-style, list-style-image, list-style-position
• symbols(), the functional notation creating anonymous counter styles.