List bullet colors, a CSS annoyance


Something I've been asked to do several times over my career is to have a list in HTML with the bullet show up as a different color to the text. Unfortunatley the HTML & CSS standards don't allow this without some shoe-horning. You basically have two options:

  • Use an image
  • Set the color on the list that you want the bullets to be, then add another element within the LI (list item) that contains all the content and set its color to what the text should be.

The problem with the first option is that you have a separate file to download, the problem with the second is that you have to add erroneous tags for something that IMHO should be part of the standard.