Change Bullet Color for Lists with ::marker CSS Selector


The ::marker selector is used to select the marker of a list item in CSS. It updates the marker properties on bullets or numbers i.e., unordered or ordered lists. We will use the ::marker selector with the color property to change the bullet color.

Syntax

The syntax of CSS ::marker selector is as follows −

Selector::marker {
   attribute: /*value*/;
}

The following examples illustrate CSS ::marker selector.

Create a Colored Vertical Bullet List

To add a color to the bullet list, set the ::marker selector. The bullet lists get displayed vertically by default. Here, we have colored a bullet list using the ::marker and the color property −

li::marker {
   color: orange;
}

The bullet list is circular and set using the list-style property with the value circle −

list-style: circle;

Example

The following is the code to create a colored bullet list −

<!DOCTYPE html>
<html>
<head>
   <style>
      ul {
         list-style: circle;
         font-size: 1.2em;
      }
      li::marker {
         color: orange;
      }
   </style>
</head>
<body>
   <h2><strong>Popular Sports</strong></h2>
   <ul>
      <li>Football</li>
      <li>Cricket</li>
      <li>Volleyball</li>
      <li>Archery</li>
   </ul>
</body>
</html>

Create a Colored Horizontal Bullet List

We have set a color to the bullet list using the ::marker selector. To create a horizontal bullet list, we have set the float property for the <li> −

float: left;

The bullet list is circular and set using the list-style property with the value square

list-style: square;

Example

The following is the code to create a horizontal colored bullet list −

<!DOCTYPE html>
<html>
<head>
   <style>
      ul {
         list-style: square;
         overflow: hidden;
      }
      li::marker {
         color: green;
      }
      li {
         width: 15%;
         margin: 2%;
         float: left;
         box-shadow: inset 2px 0px 10px lightblue;
      }
   </style>
</head>
<body>
   <h2><strong>Popular Sports</strong></h2>
   <ul>
      <li>Cricket</li>
      <li>Football</li>
      <li>Archery</li>
      <li>Tennis</li>
   </ul>
</body>
</html>

Updated on: 30-Oct-2023

809 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements