Christoph ZillgensBack to Home

I‘m an Interface Designer and Web Developer from Germany. Here are some example of my work at my one-man company

Language

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

<ul>
<li>This is a nice list</li>
<li>This is a nice list</li>
<li>This is a nice list</li>
<li>This is a nice list</li>
</ul>

The CSS

li {
  list-style:none;
  margin-right:40px;}
li:before {
  color:#b4461f;
  content:"•"; 
  font-weight:bold;
  margin-left:-16px;
  padding-right:7px;}

The most important thing is the pseudo class :before which you can use to add visual elements without additional markup. Herein we 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.

Here is a sample page comparing the standard and the enhanced lists. There are also some little differences regarding the Typeface you’re using.

12 comments

  1. Tanner wrote 1002 days ago · #

    It’s amazing how a dash of color can add so much feeling to a list.

  2. Kevin Ohlin wrote 999 days ago · #

    Thanks for the handy little tip!

  3. Anthony Garand wrote 998 days ago · #

    Nice tip, the way I’ve always achieved this was with a span or some element inside the <li>…</li>‘s

  5. Koodoz Design wrote 979 days ago · #

    Brilliant. We’ll definitely have to use this tidbit of info on a site we’re working on atm which has its fair share of listed items. Nice!

  6. Ash Robbins wrote 923 days ago · #

    Great, this is really useful. The way I’ve done this before (using background images) seems majorly dumbass now!

  7. themisfit wrote 877 days ago · #

    Thanks for the tut. This is exactly what I was looking for.

  9. Anders Te wrote 634 days ago · #

    Still struggling with understanding CSS so all usefull code is appreciated. Thanks.

  11. Juan Mata wrote 301 days ago · #

    This is very good nice job guys!

  12. Agneepath wrote 299 days ago · #

    This is very nice main amazing!

Commenting is closed for this article.