Demo how to make colored list bullets and numbers with HTML/CSS


Here's the easy way to make colored list bullets, or colored list numbers:

  1. This number is red
  2. This number is green
  3. This number is blue

Source:

 <ul style="background-color:#ff0;max-width:20em">
   <li style="color:red"><span style="color:black">This bullet is red</span></li>
   <li style="color:green"><span style="color:black">This bullet is green</span></li>
   <li style="color:blue"><span style="color:black">This bullet is blue</span></li>
   <li style="color:white"><span style="color:black">This bullet is white</span></li>
   <li style="visibility:hidden"><span style="visibility:visible">This bullet is hidden</span></li>
 </ul>

 <ol>
   <li style="color:red"><span style="color:black">This number is red</span></li>
   <li style="color:green"><span style="color:black">This number is green</span></li>
   <li style="color:blue"><span style="color:black">This number is blue</span></li>
 </ol>


Note: maddeningly, you cannot do the same trick with the opacity attribute. Nested opacity settings multiply, and you cannot set a value greater than 1, so there's no way to "undue" an outer opacity setting:

Source:

 <ul>
   <li style="opacity:0.5"><span style="opacity:2">This bullet has opacity 0.5</span></li>
   <li style="opacity:0.5"><span style="opacity:1">This bullet has opacity 0.5</span></li>
   <li style="opacity:0.5"><span style="opacity:0.5">The bullet has opacity 0.5, and the text has opacity 0.5×0.5 = 0.25</span></li>
   <li><span style="opacity:0.5">This text has opacity 0.5</span></li>
 </ul>

Dave Burton, 5/25/2019