Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- 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>
1K+ Views
