additive-symbols
The additive-symbols
descriptor lets you specify symbols when the value of a counter system
descriptor is additive
. The additive-symbols
descriptor defines additive tuples, each of which is a pair containing a symbol and a non-negative integer weight. The additive system is used to construct sign-value numbering systems such as Roman numerals.
Syntax
additive-symbols: 3 "0";
additive-symbols: 3 "0", 2 "\2E\20";
additive-symbols: 3 "0", 2 url(symbol.png);
When the system
descriptor is cyclic
, numeric
, alphabetic
, symbolic
, or fixed
, use the symbols
descriptor instead of additive-symbols
.
Formal definition
Related at-rule | @counter-style |
---|---|
Initial value | n/a (required) |
Computed value | as specified |
Formal syntax
[ <integer [0,∞]> && <symbol> ]# <symbol> = <string> | <image> | <custom-ident>
Examples
Specifying additive symbols
HTML
<ul class="list">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
CSS
@counter-style additive-symbols-example {
system: additive;
additive-symbols: V 5, IV 4, I 1;
}
.list {
list-style: additive-symbols-example;
}
Result
Specifications
Specification |
---|
CSS Counter Styles Level 3 # counter-style-symbols |
Browser compatibility
BCD tables only load in the browser
See also
list-style
,list-style-image
,list-style-position
- The
symbols()
, functional notation is used for creating anonymous counter styles.