W3cubDocs

/CSS

symbols

The symbols CSS descriptor is used to specify the symbols that the specified counter system will use to construct counter representations.

Syntax

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

Values

<symbol>

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

Description

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.

Formal definition

Related at-rule @counter-style
Initial value n/a (required)
Computed value as specified

Formal syntax

symbols = 
<symbol>+

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

<image> =
<url> |
<gradient>

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

Examples

Setting counter symbols

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

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
symbols
91Does not support <image> as a value for the symbols descriptor.
91Does not support <image> as a value for the symbols descriptor.
33Does not support <image> as a value for the symbols descriptor.
No
77Does not support <image> as a value for the symbols descriptor.
No
91Does not support <image> as a value for the symbols descriptor.
91Does not support <image> as a value for the symbols descriptor.
33Does not support <image> as a value for the symbols descriptor.
64Does not support <image> as a value for the symbols descriptor.
No
16.0Does not support <image> as a value for the symbols descriptor.

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style/symbols