The Right Way to Add Custom List Markers to Unordered Lists

Most experienced web developers now understand that using CSS’s built-in method for adding custom list markers (also referred to as “bullets”) to style an unordered list is not an option. The unpredictable bugs that occur in Internet Explorer when using the list-style-image property render that method quite useless.

Fortunately, because of CSS’s inherent flexible nature, we can still customize the list marker on an unordered list. This is done by placing a background image on the list items. Here’s how most developers do this:

ul.custom_list li {
  background: transparent url(images/bullet.gif) no-repeat left center;
  padding: 3px 0 3px 15px;
}

The important part to note is the “left center” part of that style rule, which sets the background image to the far left of the list item. I’ve also included padding on the top and bottom to give it some space between list items, plus a 15px indent, to ensure that the list content doesn’t overlap the marker.

With the style rule above, here’s how the list would look with a simple square blue bullet:

• This is the text for list item number one.
• This is the text for list item number two.
• This is the text for list item number three.
• This is the text for list item number four.

List Items Spanning Multiple Lines Cause Problems

But, what happens if the list has a set width, or the contents of a list item expand past the full length of the available horizontal space? In any case, one or more of the list items will span multiple lines, and the result will be as follows:

• This is the text for list item number one.
• This is the text for list item number two.
• This is the text for list item number three. This is the text for list item number three. This is the text for list item number three. This is the text for list item number three. This is the text for list item number three. This is the text for list item number three.
• This is the text for list item number four.

The third list item now spans multiple lines and, as a result, the bullet is still centered on that list item. Some people might not mind the way that looks, but I personally don’t like it. Bullets on list items should be placed next to the first line of every item.

Set Marker Position Using Pixels

To resolve this problem, instead of using “left center” to align the bullet, we’ll use “0 10px” (or whatever number of pixels gets the bullet aligned with the first line of the list item). Here is the result:

• This is the text for list item number one.
• This is the text for list item number two.
• This is the text for list item number three. This is the text for list item number three. This is the text for list item number three. This is the text for list item number three. This is the text for list item number three. This is the text for list item number three.
• This is the text for list item number four.

The result is now as expected — the list marker is aligned with the first line of each list item, regardless of how many lines any of the list items span.

Drawbacks

Now, while this is the more aesthetically pleasing solution to custom list markers, there is one drawback. You might have to change the position of the list marker for different lists, depending on font-size, line-height, or the size of the list marker. Also, if you redesigned your site, the previous list marker settings will more than likely have to be adjusted.

All things considered, I think those drawbacks are small in comparison with the better looking list markers in this solution.