Open In App

How to change the color of bullets using CSS ?

Improve
Improve
Like Article
Like
Save
Share
Report

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.

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 any HTML tags like <strong>,<p>, etc. as per your need.

Example: In this example, we use the above-explained approach.

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.

Example: Here we are using the above-explained approach.

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



Last Updated : 05 May, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads