symbols
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()
function<url>
type- CSS counter styles module