- Trending Categories
- Data Structure
- Networking
- RDBMS
- Operating System
- Java
- MS Excel
- iOS
- HTML
- CSS
- Android
- Python
- C Programming
- C++
- C#
- MongoDB
- MySQL
- Javascript
- PHP
- Physics
- Chemistry
- Biology
- Mathematics
- English
- Economics
- Psychology
- Social Studies
- Fashion Studies
- Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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>