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:
<string>
<image>
(Note: This value is "at risk" and may be removed from the specification. It is not yet implemented.)<custom-ident>
Description
A symbol can be a string, image, or identifier. It is used within the @counter-style
at-rule.
css
symbols: A B C D E;
symbols: "\24B6""\24B7""\24B8"D E;
symbols: "0" "1" "2" "4" "5" "6" "7" "8" "9";
symbols: url("one.svg") url("two.svg") url("three.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.
While a space between quoted symbols is not required, it makes the CSS more legible. To use a quote as a symbol, either escape the quote character or enclose the character is using different quotes, such as "'"
.
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
html
<ul class="list">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
CSS
css
@counter-style symbols-example {
system: fixed;
symbols: A "1" "\24B7"D E;
}
.list {
list-style: symbols-example;
}
Result
Specifications
Specification |
---|
CSS Counter Styles Level 3 # counter-style-symbols |
Browser compatibility
BCD tables only load in the browser
See also
- 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 stylesurl()
function- CSS counter styles module