Home » CSS

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.

Syntax

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

element::marker{
    properties:"values";
}

Example to Change Bullet Color for Lists using CSS

<!DOCTYPE html>

<html>
   <head>
      <style>
         ::marker {
         color: deeppink;
         font-size: 50px;
         }
      </style>
   </head>
   <body style="background-color: ghostwhite">
      <h1>::marker selector</h1>
      <ul>
         <li style="list-style: square">Ram</li>
         <li style="list-style: square">Anuj</li>
         <li style="list-style: square">Kia</li>
      </ul>
      <ul>
         <li>Lion</li>
         <li>Tiger</li>
         <li>Leopard</li>
      </ul>
      <ol>
         <li>Car</li>
         <li>Activa</li>
         <li>Cycle</li>
      </ol>
   </body>
</html>

The output of the above example is:

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 »

How to create CSS3 Rounded Corners?

How to Create a Triangle Using CSS clip-path?