Different coloured bullet points in a CSS list

posted on Monday 26th January, 2009 by Neil

Whilst browsing round the interweb I realised that there are no really clean ways of delivering different coloured bullets to the text unless you want to use SPANs or create your own bullet images in JPG, GIF or PNG. Lets take a look at both these methods:

wrap your LI text in a SPAN

A very useful method but requires all of the text within the LI to be wrapped in a SPAN tag. This solution is not ideal, especially if you're using a CMS with a WYSIWYG interface; you'd have to tell your clients "When creating a list, please add these special tags round your list content". Not a great solution.

Use image bullet points

This works well but theres one flaw: Lets say I want to change some of my elements to another colour or need more than one colour for the bullets? Sure we could just create each bullet again using the right colour, but wouldn't it be nice if we could simply change a few lines of CSS?

Break out your HTML/CSS editor of choice and join me on a journey of discovery and wonderment!!! Whilst I'm sure that this technique is not unique, I found no reference to it on my travels through Googleland. It's actually elegantly simple.

1. Create a new bullet image using either a GIF or PNG.

This is required as we're actually making an image with a bullet sized hole in it rather than making an image of a coloured bullet. We're effectively making a "mask" so that the "hole" can show some of the content underneath. Make the image quite wide, say 50px. Take a look at the GIF below for an example. This is a bullet GIF designed for a white background, and could be changed to suit any other solid background. We just left it white so you could see it:

2. Create your list in HTML

<ul>
  <li>list item one</li>
  <li>list item two</li>
  <li>list item three</li>
  <li>list item four</li>
  <li>list item five</li>
</ul>

3. Now add some CSS to our HTML HEAD

First we'll reset margin and padding on UL and LI elements:

ul, li {  
margin:0; 
padding:0;
}

Then we'll add a left border to our UL for the colour we want our bullets to be displayed in:

ul { 
border-left:30px solid #00CC33 ;
}

Great! Now lets style the remainder of the LI

ul li {
list-style-type:none;
background:#FFFFFF;
background:url(bullet.gif) left center no-repeat;
padding-left:30px;
margin-left:-30px; 
}

Notice that the ULs border should match the UL LI padding and negative margin. the negative margin simply makes the child LIs sit on top of the border we applied to the UL, and because we used a background image on the LI using our masked bullet, we can see the colour show through from underneath. All we have to do to change the colour of the "bullet" is change the colour of the UL border. Job done!!!

Heres a couple of examples of the working list.

Issues

There are (obviously) some limitations of this method:

1. You can only use it in pages/areas where you have a solid background colour as you have to create a mask bullet using that colour. Also you would still have to have a different bullet mask for each background you were wanting to use this method on.
2. You lose some functionality with the LI backgrounds as you've already used them.