How to set Bullet colors in HTML Lists using only CSS?

Given an unordered lists (UL) of bullets, we need to change the color of the bullets in the list using CSS.

Note: It is not allowed to use any images or span tags.

First of all, there is not direct way in CSS by which we can change the color of the bullets in an unordered list. However, to change the color of the bullets in an unordered list using CSS, we will have to first discard the default list-style and manually define the content that comes before each list item of the list.



This content is the Unicode of the kind of bullet that you want to use for your list. The Unicode characters for different bullet styles are as follows:

  • Square: "\25AA"
  • Circle: "\2022"
  • Disc: "\2022"

Below is a sample CSS code that removes the default style from an Unordered List in HTML and use unicodes:

filter_none

edit
close

play_arrow

link
brightness_4
code

ul{
    /* Remove default bullets */
    list-style: none
}
      
ul li::before {
     
   /* Add Unicode of the bullet */
   content: ;  
     
   /* Color of the content -- bullet here */
   color: green
     
   /* Required to add space between 
        the bullet and the text */
   display: inline-block
     
   /* Required to add space between
        the bullet and the text */
   width: 1em
     
   /* Required to add space between the
        bullet and the text */
   margin-left: -0.9em
}

chevron_right


Below programs illustrate the above approach of changing colours of list item bullets:

Example 1:

filter_none

edit
close

play_arrow

link
brightness_4
code

<html>
   <head>
        <title>Changing Bullet Colors</title>
          
        <style>
            h3{
                color:green;
            }
              
            ul{
                list-style: none;
            }
              
            ul li::before {
                  
                /* \2022 is the CSS Code/unicode for a disc */
                content: "\2022";  
                color: green; 
                display: inline-block; 
                width: 1em;
                margin-left: -0.9em;
                font-weight: bold;
                font-size:1.1rem;
            }
        </style>
  </head>
    
  <body>
    
    <h3>Geek Movies</h3>
      
    <!-- Create an Unordered List -->
    <ul>
        <li>Star Wars</li>
        <li>Back to the future</li>
        <li>Ghostbusters</li>
        <li>The princess bride</li>
        <li>Shaun of the dead</li>
    </ul>
      
  </body>
    
</html>

chevron_right


Output:

Example 2:

filter_none

edit
close

play_arrow

link
brightness_4
code

<html>
   <head>
        <title>Changing Bullet Colors</title>
          
        <style>
            h3{
                color:green;
            }
              
            ul{
                list-style: none;
            }
              
            ul li::before {
                  
                /*\25E6 is the CSS Code/unicode for a circle */
                content: "\25E6";  
                color: green; 
                display: inline-block; 
                width: 1em;
                margin-left: -0.9em;
                font-weight: bold;
                font-size:1.1rem;
            }
        </style>
  </head>
    
  <body>
    
    <h3>Geek Movies</h3>
      
    <!-- Create an Unordered List -->
    <ul>
        <li>Star Wars</li>
        <li>Back to the future</li>
        <li>Ghostbusters</li>
        <li>The princess bride</li>
        <li>Shaun of the dead</li>
    </ul>
      
  </body>
    
</html>

chevron_right


Output:

Example 3:

filter_none

edit
close

play_arrow

link
brightness_4
code

<html>
   <head>
        <title>Changing Bullet Colors</title>
          
        <style>
            h3{
                color:green;
            }
              
            ul{
                list-style: none;
            }
              
            ul li::before {
                  
                /* \25AA is the CSS Code/unicode for a square */
                content: "\25AA";  
                color: green; 
                display: inline-block; 
                width: 1em;
                margin-left: -0.9em;
                font-weight: bold;
                font-size:1.1rem;
            }
        </style>
  </head>
    
  <body>
    
    <h3>Geek Movies</h3>
      
    <!-- Create an Unordered List -->
    <ul>
        <li>Star Wars</li>
        <li>Back to the future</li>
        <li>Ghostbusters</li>
        <li>The princess bride</li>
        <li>Shaun of the dead</li>
    </ul>
      
  </body>
    
</html>

chevron_right


Output:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.



Improved By : Archana choudhary



Article Tags :
Practice Tags :


3


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.