CSS additive-symbols Descriptor
Last Updated :
01 Jul, 2022
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;" >
GeeksForGeeks
</ 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;" >
GeeksForGeeks
</ 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
Share your thoughts in the comments
Please Login to comment...