I have a list,
<ul class="listStyle">
<li>
<strong>View :</strong> blah blah.
</li>
<li>
<strong>Edit :</strong> blah blah blah.
</li>
</ul>
I am using square bullet for list.
.listStyle{
list-style-type: square;
}
Bullets appears in black color. Is it possible change the color of the bullet? If yes, how can i change it?
Please help, Thanks
This question is related to
css
I would recommend you to use background-image instead of default list.
.listStyle {
list-style: none;
background: url(image_path.jpg) no-repeat left center;
padding-left: 30px;
width: 20px;
height: 20px;
}
Or, if you don't want to use background-image as bullet, there is an option to do it with pseudo element:
.liststyle{
list-style: none;
margin: 0;
padding: 0;
}
.liststyle:before {
content: "• ";
color: red; /* or whatever color you prefer */
font-size: 20px;/* or whatever the bullet size you prefer */
}
You have to use image
.listStyle {
list-style: none;
background: url(bullet.jpg) no-repeat left center;
padding-left: 40px;
}
Source: Stackoverflow.com