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>