Nothing is for sale here. Freewill tips keep the site running. Want to help? → Tip via Paypal

Colored List Bullets

One thing I’ve been asked many times is how to create list markers that are a different color than the list item text. That used to mean using images for bullets or a lot of messing around with span tags and CSS.

CSS has evolved! Now it's easy to do with just a tiny bit of code. You can the bullets or item numbers one color and have your list item text your default text color, or even another color. Here's an example of each:

The HTML is for all lists is just your basic list code with a CSS class added. The exception is the third list, which has a color added to the <ol> tag.

<ol class="maroon"> ←Only need to change the class name to the one you use. A color style was added to the third list to change the text color.
<li>First</li>
<li>Second</li>
<li>Third</li>
</ol>

All the Code

List One HTML
<ul class="darkgreen">
  <li>I'm very funny.</li>
  <li>I am not funny.</li>
  <li>I'm indecisive.</li>
</ul>

List One CSS
ul.darkgreen ::marker {color: darkgreen;}

---

List Two HTML
<ol class="blue">
  <li>I'm very funny.</li>
  <li>I am not funny.</li>
  <li>I'm indecisive.</li>
</ol>

List Two CSS
ol.blue ::marker {color: blue;}

---

List Three HTML
<ol class="maroon" style="color: green;">
  <li>You're very funny.</li>
  <li>You are not funny.</li>
  <li>We are a lot alike.</li>
</ol>

List Three CSS
ol.maroon ::marker {color: maroon;}

Rainbow List

One more just for fun—a multi-colored list.

• I am red.
• I am blue.
• I am brown.
• I am green.
• I am purple.
• I am orange.
• I am gray.

The Code

<ul style="font-weight: bold">
<li style="color: red">I am red.</li>
<li style="color: blue">I am blue.</li>
<li style="color: brown">I am brown.</li>
<li style="color: green">I am green.</li>
<li style="color: purple">I am purple.</li>
<li style="color: orange">I am orange.</li>
<li style="color: gray">I am gray.</li>
</ul>