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

12 Feb, 2019
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:
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; }
Below programs illustrate the above approach of changing colours of list item bullets:
Example 1:
<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:
<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:
<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:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
Archana choudhary
Picked
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to create footer to stay at the bottom of a Web page?
Types of CSS (Cascading Style Sheet)
Create a Responsive Navbar using ReactJS
Design a web page using HTML and CSS
How to position a div at the bottom of its container using CSS?
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Types of CSS (Cascading Style Sheet)
Hide or show elements in HTML using display property
How to Insert Form Data into Database using PHP ?