Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to change the color of bullets using CSS ?

  • Last Updated : 20 Sep, 2021

To present a list of data in HTML which have no order/sequence but are related to each other unordered list is used. Unordered lists are created using <ul> tag  and each list item is written using <li> tag. List items are pointed out using plain bullets. 

Note: We cannot change the color of the bullet of the unordered list by default but we can take the help of some other tags and selectors.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

There are two ways to change the color of the bullet:

  • Using an extra markup tag.
  • Using Css style ::before selector



 

Default style: Let us create a list of data using an unordered list.

HTML




<ul>
    <li>Welcome to "GFG"</li>
    <li>Geeks</li>
    <li>For</li>
    <li>Geeks</li>
</ul>

Output:

Plain List

CSS can be used to change these bullets to make them more attractive and attention-seeking to the readers. Let us see how we can change the color of bullets to make more visual sense to the readers.

Adding an extra markup: You can have separate colors for the list text and bullet after adding an extra markup. In the example below, we will enclose the list text in a span, then define the style to display the results. You can enclose with any HTML tags like <strong>,<p>, etc. as per your need.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <style>
        li {
            color: blue;
            /* Bullet Color */
        }
  
        li span {
            color: green;
            /* Text Color */
        }
    </style>
</head>
  
<body>
    <ul>
        <li><span>Welcome to "GFG"</span></li>
        <li><span>Geeks</span></li>
        <li><span>For</span></li>
        <li><span>Geeks</span></li>
    </ul>
</body>
  
</html>


Output:

Colored Bullet List

Using CSS ::before Selector: The first step is to remove the default styling through CSS styles. Then add the style accordingly for the bullet content that you want. You can edit the styles according to the design and spacing that you need. Create your own custom bullet with your own indentation and color styles. There is no need to add an extra markup as compared to the previous step. Old browsers will not support  “:before” and may hamper your website’s look in that case.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Download Link</title>
    <style>
        li {
            /* Default bullets style erased */
            list-style: none;
        }
  
        li::before {
  
            /* Unicode for a bullet */
            content: "\2022";
              
            /* Styles for Indentation*/
            color: violet;
              
            display: inline-block;
            width: 1em;
            margin-left: -1em;
        }
  
        li {
            color: green;
        }
    </style>
</head>
  
<body>
    <ul>
        <li><span>Welcome to "GFG"</span></li>
        <li><span>Geeks</span></li>
        <li><span>For</span></li>
        <li><span>Geeks</span></li>
    </ul>
</body>
  
</html>


Output:

Violet Bullets




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!