Change Bullet Color for Lists with ::marker CSS Selector

By using the CSS selector ::marker, we have to change the bullet color for lists.
Submitted by Apurva Mathur, on June 25, 2022

What is ::marker property?

CSS provides us pseudo-element property which helps us to design some specific part of the element. These are one of the common and very interesting ways of designing the parts of the specific elements. One of the pseudo-element properties is ::marker, this style is the list of the element. By default when we write any item in a list we get black color bullets/ numbers/shapes but with the help of ::marker we can change the color of the bullets.

Syntax:

All the pseudo-element property are written with :: (double colon).

Syntax:

element::marker{property:"value";}

Example:

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

Output:

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 Tutorial & Examples »


ADVERTISEMENT
ADVERTISEMENT




Comments and Discussions!




Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates

© https://www.includehelp.com some rights reserved.