Styling List Markers with CSS

Lists are a very powerful and sadly overlooked feature of HTML. Their most obvious use is to organize information into a list form, but they can also be used to create a range of other effects such as side menus and navigation bars. With CSS we can gain even greater control over our HTML lists, making them even more powerful.

Changing the appearance of your HTML list markers

By default list items are displayed with a bullet point for unordered lists, a number for ordered lists, and no marker for definition lists. However, we can specify a number of different markers by using the list-style-type property. For example, to specify square markers for our unordered lists we would use the following code in our CSS:

ul li {
	list-style-type: square;
}

Here is a complete list of the various marker choices, showing the appearance of the marker alongside the CSS value used to produce it:

Unordered List Markers
  • disc
  • circle
  • square
  • none
Ordered List Markers
  1. decimal
  2. lower-roman
  3. upper-roman
  4. lower-alpha
  5. upper-alpha

There are also a few other marker types that we can specify, but these are not supported by many browsers, so it is best to stick with the ones above.

Creating your own HTML list markers using images

As well as the list markers discussed above we can specify our own list markers using images. To specify an image to be used as the list marker, simply use the list-style-image property followed by the URL of the image. It is good practice to also specify a list-style-type as a backup incase for any reason the image is unavailable:

li {
	list-style-image: url(/images/listmarker.gif);
	list-style-type: disc;
}

Here's an example of a list marker image, using an image of a purple arrow as the list marker:

  • Here's a list item
  • Another list item
  • A final list item