symbols
Baseline 2023
Newly available
Since September 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
The symbols
CSS descriptor of the @counter-style
at-rule is used to specify the symbols for creating counter representations in the specified counter system. Specifying this descriptor is mandatory when the value of the system
descriptor is cyclic
, numeric
, alphabetic
, symbolic
, or fixed
.
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("one.svg") url("two.svg") url("three.svg");
symbols: indic-numbers;
Values
The symbols
descriptor is specified as a list of one or more space-separated <symbol>
values.
<symbol>
-
Specifies the symbol to use within the counter system. Each symbol in the list can be either a
<string>
, an<image>
, or a<custom-ident>
. The<image>
value can, in turn, be specified as a<url>()
or<gradient>
.
Note: When using an identifier for a symbol, note that ASCII non-letters such as *
, "
, and \
are not considered identifiers. They must be either quoted as a string or escaped.
Description
A symbol can be a string, image, or identifier. It is used within the @counter-style
at-rule.
When the value of the system
descriptor is cyclic
, numeric
, alphabetic
, symbolic
, or fixed
, the symbols
descriptor must be specified. For the additive
system, use the additive-symbols
descriptor instead to specify the symbols.
While a space between quoted symbols is not required, it makes CSS more readable. To use a quote as a symbol, either escape the quote character or enclose the character within different quotes, such as "'"
.
When defining symbols with identifiers instead of strings, be sure to use identifier syntax rules. For example, as noted above, ASCII non-letters such as *
are not identifiers and must be either quoted or escaped. Hex escape characters are followed by a space. This space may look like the space separating two identifiers, but it enables digits to follow hex-escaped characters. This means that two spaces must be included after a hex-escaped identifier to separate it from the next identifier. For example, it is better to use the string "\2A 1"
instead of \2A 1
with two spaces, as your code tools might remove double spaces. It is generally safer to quote identifiers that need to be escaped or use strings.
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()> |
<src()>
<url()> =
url( <string> <url-modifier>* ) |
<url-token>
<src()> =
src( <string> <url-modifier>* )
Examples
Setting counter symbols
In this example, the list of values for the symbols
descriptor include letters (A
, D
, E
), a number within quotes ("1"
), and a hex-escape identifier within quotes ("\24B7"
) for the character Ⓑ
.
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
Specification |
---|
CSS Counter Styles Level 3 # counter-style-symbols |
Browser compatibility
BCD tables only load in the browser
See also
@counter-style
descriptors:system
,additive-symbols
,negative
,prefix
,suffix
,range
,pad
,speak-as
,fallback
- List style properties:
list-style
,list-style-image
,list-style-position
symbols()
functionurl()
function- CSS counter styles module