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:
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 -- 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 for an interesting one.
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;}
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 :)
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 :)
To be honest, I'm surprised even this method works in IE :lol:
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.
Depending on your situation, you could probably do this with before pseudo-element and generated content.
ul { list-style: none; }
li:before { content:"\2022 \00A0"; color: red; }
Just a thought.
@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 for an interesting one.