How To: Custom List Bullets

In this post I'm gonna show you how to create custom list bullets for unordered lists.

Latest Tweets

I try to order some bottles of #Syltsje. #noteasy
I'm backing another old site up before the relaunch.
http://tweetphoto.com/41870778

Google Ads

Sometimes you need to define a different list-style than the ones CSS offers you. That’s when the CSS property list-style-image comes in. But I really have to say, it never worked for me this way. So I guess I read an article on custom list bullets on the internet and since then I use this technique.

Here’s a little DEMO.

Use Photoshop for the bullet

I always use Photoshop to create some custom list bullets. Open up a new image and give it the same height and width as you will use for the line-height. In my case it’s 16px x 16px. Then be creative and design a custom list bullet. Here’s what I did:

The Unordered List

The HTML is a simple unordered list:

<ul>
    <li>Whatever 1</li>
    <li>Whatever 2</li>
    <li>Whatever 3</li>
    <li>Whatever 4</li>
    <li>Whatever 5</li>
</ul>

Styling it

In the CSS we reset the list-style and the margin and the padding of the «ul».

ul {list-style:none; padding:0; margin:0;}

Now we have to style the «li»-tags.

ul li {background:url(bullet.gif) no-repeat; padding:0 0 0 30px; line-height:16px; font-size:16px; margin:0 0 5px 0;}

We set the bullet-image as background of the «li», set the line-height to the height of our image and give it a font-size. The padding-left is pretty important, but the value is up to you. In this case I used 30px. To give the lines bit of spacing I also set the bottom-margin to 5px.

Here’s the sourcefiles.

Did you ever used this technique?

Leave a Reply