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:

Recommended Answers

All 3 Replies

Not possible; not part of the CSS specification.

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.