Grow your CSS skills. Land your dream job.

Change the color of a list bullet without images?

  • # April 8, 2009 at 1:54 pm

    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:

    Code:
    li {color: #999;}
    li span {color: #000;}
    Code:
  • Item 1
  • Item 2

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 :)

# April 8, 2009 at 2:16 pm

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
# April 8, 2009 at 4:09 pm
"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 :)

# April 8, 2009 at 9:55 pm
"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:

# April 10, 2009 at 10:38 am

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

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

# April 10, 2009 at 3:03 pm
"chriscoyier" wrote:
I think the span technique is generally the go-to method for this:

http://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.

# November 9, 2012 at 11:50 am

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
# November 9, 2012 at 12:10 pm

@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.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".