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

Last Updated : 30 Sep, 2024

In HTML, unordered lists (<ul>) typically use default bullet styles, which inherit the text color of the list items. Sometimes, you may want to change the color of the bullets themselves. Although CSS does not provide a direct way to style the default bullets, there is a workaround. By removing the default list-style and using Unicode characters, you can manually define custom bullet styles with specific colors.

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

Approach:

To change the bullet color in an unordered list using CSS:

Remove the default bullets by setting list-style: none;.
Use the ::before pseudo-element to insert a Unicode bullet before each list item (<li>).
Style the bullet using CSS properties like color, font-size, and margin-left.

Unicode Characters for Common Bullet Styles:

Square: \25AA
Circle: \25E6
Disc: \2022

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

CSS

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; 
}

Example 1: Disc Bullets

In this example, we use the Unicode character \2022 for a disc-style bullet and set the bullet color to green.

HTML

<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>

Output:

Example 2: Circle Bullets

In this example, we use the Unicode character \25E6 for a circle-style bullet and set the bullet color to green.

HTML

<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>

Output:

Example 3: Square Bullets

In this example, we use the Unicode character \25AA for a square-style bullet and set the bullet color to green.

HTML

<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>

Output:

Although CSS does not provide a direct way to change the color of bullets in an unordered list, you can achieve this effect by using Unicode characters and the ::before pseudo-element. This method gives you complete control over the bullet’s style, color, and positioning, enhancing the visual appeal of your list items.

How to Change the Color of Bullets using CSS?

Archana choudhary

Improve

Article Tags :

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

Approach:

Unicode Characters for Common Bullet Styles:

Example 1: Disc Bullets

Example 2: Circle Bullets

Example 3: Square Bullets

Similar Reads

Thank You!

What kind of Experience do you want to share?