Change the color of a list bullet without images?

[daGUY]

I was looking over my resume on my portfolio site, and I started to think that all those black bullets looked ugly :lol: What I want to do is change the color of just the bullets, without resorting to using images.

The best suggestion I saw was to set the color on the list item, then wrap the item text in a span and give it a different color:

li {color: #999;}
li span {color: #000;}

<li><span>Item 1</span></li>
<li><span>Item 2</span></li>

It works, but I was wondering if there’s an official way with CSS to actually change just the bullet color. If not, there should be :)

[apostrophe]

Yeah, this was also about the best solution I could come up with recently when I had to do the same thing with an ordered list.

Even if there was an "official" CSS method, do you honestly think that IE would support it? :lol:

[Rob MacKay]

"apostrophe" wrote:

Even if there was an "official" CSS method, do you honestly think that IE would support it? :lol:

never a truer word spoken, and for the record daGuy thats how I would have done it :)

[daGUY]

"apostrophe" wrote:

Yeah, this was also about the best solution I could come up with recently when I had to do the same thing with an ordered list.

Even if there was an "official" CSS method, do you honestly think that IE would support it? :lol:

To be honest, I’m surprised even this method works in IE :lol:

[Chris Coyier]

I think the span technique is generally the go-to method for this:

https://css-tricks.com/examples/ColoredListBullets/

[daGUY]

"chriscoyier" wrote:

I think the span technique is generally the go-to method for this:

https://css-tricks.com/examples/ColoredListBullets/

Yeah, seems like it. I went ahead and changed it on my site and it looks nice. Just kind of a pain because I had to go through all my pages and manually add the <span> tags (couldn’t do find and replace because there are other list items where I didn’t want the bullet color to be different). At least I only had to do it the one time.

[Spell]

Depending on your situation, you could probably do this with before pseudo-element and generated content.

ul {
list-style: none;
}

li:before {
content:”2022 0A0″;
color: red;
}

Just a thought.

[GMB]

@Spell — that’s the way I’ve been doing it. Not only do you get the benefit of coloring the bullet, but you have a choice of what symbol you’ll use for the bullet. I love to stroll through [decodeunicode.org](http://decodeunicode.org “this site”) for an interesting one.

[Author]

Posts