Displaying Custom Bullets

The CSS property list-style-type only provides three possibilities for bullets: disc (the default marker), circle or square. Fortunately, CSS provides ways to extend the display of bullets (aka markers) beyond these three shapes. For example, you can specify an image to substitute for the default markers normally used.

To specify an image as the displayed marker for items in a list, use this syntax:

list-style-image: url(imageFilename);

This is a basic example that uses an image marker for a list:

Style sheet

div#sideBar ul {
  margin-left: 3em;
  list-style-image: url(images/green_star.jpg);
  border: 1px solid green;
  }

Markup

<div id="sideBar">
  <ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
  </ul>
</div>

... which results in this list with our custom markers:

This can be useful for menu effects. For example, an image bullet can be swapped when the user hovers over a link item. Pass your mouse over the list below to see the rollover effect:

one
two
three

The HTML markup for the list is identical to the first example above. The list is simply contained in a DIV named "navExample" with the following rules:

div#navExample ul {
  line-height: 32px;
  list-style-type: none;
  }  
 
div#navExample li {
  list-style-image: url(images/gray_star.jpg);
  }
 
div#navExample li:hover {
  list-style-image: url(images/green_star.jpg);
  }

Note that one image is used for the item marker in the normal state, while a different image is used for the list marker when the user hovers over the list item.

Summary

Lists can be styled with graphic bullets (markers). The :hover pseudo-class can be applied to a LI tag for user-interaction effects in a menu.

Resources

Taming Lists . Mark Newhouse. A List Apart.

List Properties for Menus