Hi there

I've searched all the forums on a couple of websites trying to solve my problem.

I am constructing a site in which I want to change the color of ONLY the actual bullet in a list item.

I have defined the bullet to be square using CSS, but need to know if I can change only the color of the bullet without changing the color of the text inside the list item.

Is this possible?

I am aware that I can add in a normal bullet and change the color thereof, but I really want to find a way to do all of this using my list and CSS.

Any help would be greatly appreciated :cheesy:

11 Years
Discussion Span
Last Post by nixpix

There are two ways to accomplish this each of which has it's good and bad points. I'll let you decided which method to use:

You can create a list marker graphic (e.g., a GIF file) that has your desired color. Then use a style-sheet to specify a list-style-image.


It is also possible to make the content of each LI element an element of its own, normally using SPAN or DIV, as in:

<li><span>list item, text level content</span></li>

Then set the color of LI to something, and the color of the inner element to something else. This would result in a list bullet that is of different color than the list item.

On the technical side, using an image as a bullet (via list-style-image in CSS) sounds better, but it is diffacult to adjust the positioning of the bullet with that method.


Thanks, I've gone with inserting a bullet and changing the colour of the bullet, not the list item.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.