By default,Color of bullet in unordered list is black and we can’t change the color of bullet using list style properties.
By setting some css properties ,it is possible to change color of list item.
Following example demonstrate how to set color for bullet of a list item.
First we change ” list-style” property to “none” to remove default bullet of list then we add content before list item.Depending upon the design,we can display content before or after list item.Then we can set color and font size and font weight of bullet.Here “\2022” is used as content. \2022 is the CSS Code/unicode for a bullet.
<!DOCTYPE html>
<html>
<body>
<style>
#colored{
list-style: none;
}
#colored li::before {
content: “\2022”;
color: #81C500;
font-size: 20px;
line-height: 1;
display: inline-block;
width: 1em;
margin-left: 1px;
}
</style>
<div style=”border: solid; margin-left: 1px;width:30%; margin-top:50px;”>
<h2>Default bullet list</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
</ul>
<h2>
Colored bullet list
</h2>
<ul id=”colored”>
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
</ul>
</div>
</body>
</html>
