With an one liner CSS trick you can get colored bullets of any color you wish.
This is for colored bullets:
<ul>
<li style=”color:#ff0000;”> Example text for CSS</ li>
<li style=”color:#00ff00;”> Another example text for CSS</ li>
<li style=”color:#0000ff;”>Yet another example text for CSS colored bullets </ li>
</ ul>
Result:
If you have any image overlay for your styled bullet, those colored bullet will disappear:
---
- Example text for CSS
- Another example text for CSS
- Yet another example text for CSS colored bullets
Bullet of one color and text of different color:
<ul>
<li style=”color: #ff0000;”> <span style=”color: #000000;”>Black Text red bullet</span></li>
<li style=”color: #0000ff;”> <span style=”color: #ff0000;”>Red text blue bullet </span></li>
</ul>
Example:
If you have any image overlay for your styled bullet, those colored bullet will disappear:
- Black Text red bullet
- Red text blue bullet
Obviously, advanced text formatting can be done too using highlighting with other colors, pressed text effect etc. Please read the hyperlinked articles for getting those codes. Just add for the element (bullet / text / both) you want. Easy!
Tagged With css colored bullets inline , css colored list bullets , how to get multi coloured bullets
About Abhishek Ghosh
Here’s what we’ve got for you which might like :
Additionally, performing a search on this website can help you. Also, we have YouTube Videos.
Take The Conversation Further ...
We'd love to know your thoughts on this article.
Meet the Author over on Twitter to join the conversation right now!
If you want to Advertise on our Article or want a Sponsored Article, you are invited to Contact us.
Contact Us
Along with your high SEO, your contents are completely fantastic, if you’re in it for the money, may I suggest changing the content to a higher traffic topics like Zynga and facebook tips tricks?