Change Bullet Color For Lists With ::marker CSS Selector

Home » Color List Li Css » Change Bullet Color For Lists With ::marker CSS Selector

Maybe your like

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>

Tag » Color List Li Css