CSS trick to get multi colored bullet for lists

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

This Article Has Been Shared 914 Times!

Facebook Twitter Pinterest