Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

CSS additive-symbols Descriptor

  • Last Updated : 29 Jul, 2020

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 style="text-align:center;">
    <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:

  • Firefox
  • Firefox Android

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!