Change Bullet Color for Lists with ::marker CSS Selector

In this tutorial, we will learn how to change the bullet color for lists using the CSS ::marker selector with the help of an example? By Apurva Mathur Last updated : July 24, 2023

Changing Bullet Color for Lists using CSS

By default when you write any item in a list we get black color bullets/ numbers/shapes. To change the bullet color for lists, you can use CSS ::marker selector which styles the bullet color for the list. You have to just specify the ::marker selector with an element and write the CSS properties to style that specific element.


Following is the syntax to use ::marker with an element:


Example to Change Bullet Color for Lists using CSS

<!DOCTYPE html>

         ::marker {
         color: deeppink;
         font-size: 50px;
   <body style="background-color: ghostwhite">
      <h1>::marker selector</h1>
         <li style="list-style: square">Ram</li>
         <li style="list-style: square">Anuj</li>
         <li style="list-style: square">Kia</li>

The output of the above example is:

Example: Change Bullet Color for Lists

In the above code, straightforward method is used to define a list in HTML using <ul>, <li> tags. After defining a list second step is to use ::marker selector and change the color of bullets/numbers etc. You can also apply different types of font, content, and animation property to style these bullets.

CSS Examples »

Comments and Discussions!

Load comments ↻

Copyright © 2024 All rights reserved.