CSS additive-symbols Descriptor
CSS additive-symbols descriptor is mainly used to specify symbols when the value of a counter system descriptor is additive. It defines additive tuples, each of which is a pair containing a symbol and a non-negative integer weight.
Syntax:
additive-symbols : positiveIntegerCounter identifier(s)/string(s)/image(s);
Property values: There are a few important property values which can be used in additive-symbols:
- identifier(s)
- string(s)
- image(s)
Programs to illustrate the CSS additive-symbols descriptor:
Example 1:
HTML
<!DOCTYPE HTML> < html > < head > < style > @counter-style mylist { system: additive; additive-symbols: 3 "A", 2 "\2764"; } ul { list-style-type: mylist; } </ style > </ head > < body style = "text-align:center;" > < h1 style = "color:green;" > w3wiki </ h1 > < h3 > CSS | additive-symbols descriptor </ h3 > < ul class = "list" > < li >One</ li > < li >Two</ li > < li >Three</ li > < li >Four</ li > < li >Five</ li > </ ul > </ body > </ html > |
Output:
Example 2:
HTML
<!DOCTYPE HTML> < html > < head > < style > @counter-style dice { system: additive; additive-symbols: 6 "\2685", 5 "\2684", 4 "\2683", 3 "\2682", 2 "\2681", 1 "\2680"; suffix: " "; } ul { list-style-type: dice; } </ style > </ head > < body > < h1 style = "color:green;" > w3wiki </ h1 > < h3 > CSS | additive-symbols descriptor </ h3 > < ul > < li >One</ li > < li >Two</ li > < li >Three</ li > < li >Four</ li > < li >Five</ li > </ ul > </ body > </ html > |
Output:
Supported Browsers:
- Google Chrome 91
- Edge 91
- Firefox 33
- Opera 77
Contact Us