Colorize list bullets
While styling unordered text lists for my blog I was searching for a way to change the color of the bullets. There is no way to achieve this with the standard list style types if you don’t want to use additional markup. But there’s a solution by only using CSS – and it’s all CSS 2.1, so even IE 8 understands that.
Here is the code we use
The HTML: A normal unordered list
“
- Colorize list bullets
- Colorize list bullets
- Colorize list bullets
- Colorize list bullets
”
The CSS
li {
list-style:none;
margin-right:40px;
color:#006090;
font:normal 13px/35px Georgia;
}li:before {
color:#ffcc00;
content:”•”;
font-weight: bolder;
padding-right:10px;
font-size:20px;
margin-top:10px;
}
The most important thing is the pseudo class :before which you can use to add visual elements without additional markup. Herein i put a bullet with content:“•”;. You can find the bullet on your Mac by pressing option-8 (option-ü on a German keyboard) or by pressing alt+0149 on your PC.
I also made the bullet bold because it might look too unobtrusive otherwise. Add some margin and padding to put the bullet in the right position and you’re done.
A positive side effect is that the new bullets are a little bit smaller, making them look nicer and less obtrusive than the defaults ones.
0 Comments