Change Bullet Color for Lists with ::marker CSS Selector
Syntax
The syntax of CSS ::marker selector is as follows −
Selector::marker {
attribute: /*value*/;
}Example
The following examples illustrate CSS ::marker selector.
Live Demo
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style: circle;
font-size: 1.2em;
}
li::marker {
color: green;
}
</style>
</head>
<body>
<h2><strong>TMNT</strong></h2>
<ul>
<li>Raphael</li>
<li>Donatello</li>
<li>Michaelangelo</li>
<li>Leonardo</li>
</ul>
</body>
</html>This gives the following output
Example
Live Demo
<!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>
<ul>
<li>ting</li>
<li>tong</li>
<li>ding</li>
<li>dong</li>
</ul>
</body>
</html>This gives the following output
Published on 10-Feb-2021 12:59:43
