list-style-image

Insert an image in place of the normal list styled bullets. A good choice for a bullet image would one that is smaller than the height of your text and is a relatively simple/plain graphic.

Value Description
url relative - specifies the location with respect to the local directory
exact - specifies the location with the full url

Code:

ul { list-style-image: url("http://www.tizag.com/pics/cssT/listArrow.gif"); }
ol { list-style-image: url("http://www.tizag.com/pics/cssT/listArrow2.gif"); }

Display:

An unordered list with a list-style-image:
  • This list is
  • using a picture with CSS!
and now an ordered list:
  1. This list is
  2. using a picture
  3. with CSS!