CSS Reference Property

list-style-image 1g2040

The list-style-image property is used to specify an image that is to be used as a marker (bullet) for list items or elements with display: list-item. 7012z

When the image is available, it will replace the the marker set using the list-style-type property.

The size of the image is calculated from the following rules:

  1. If the image has a intrinsic width and height, the used width and height are the intrinsic width and height.
  2. Otherwise, if the image has an intrinsic ratio and either an intrinsic width or an intrinsic height, the used width/height is the same as the provided intrinsic width/height, and the used value of the missing dimension is calculated from the provided dimension and the ratio.
  3. Otherwise, if the image has an intrinsic ratio, the used width is 1em and the used height is calculated from this width and the intrinsic ratio. If this would produce a height larger than 1em, then the used height is instead set to 1em and the used width is calculated from this height and the intrinsic ratio.
  4. Otherwise, the image’s used width is its intrinsic width if it has one, or else 1em. The image’s used height is its intrinsic height if it has one, or else 1em.

You can read more about images and their intrinsic dimensions or lack thereof in the <image> entry.

Official Syntax 4j1l4a

  • Syntax:

    list-style-image: <url> | none | inherit
  • Initial: none
  • Applies To: elements with display: list-item
  • Animatable: no

Values 4w6m73

<url>
The URL pointing to the location of the image that is to be used as a marker.
none
No image is used as a marker.
inherit
The list item inherits its list-style-image value from its parent.

Examples 3y6d6i

The following example sets the marker at the beginning of each list item to be the image “pointing-hand.png”.

ul { 
    list-style-image: url("images/pointing-hand.png"); 
}
                

Live Demo 176n59

Try using an image of your own as the list item marker to see how it changes.

View this demo on the Codrops Playground

Browser s162l

The list-style-image property is ed in all major browsers: Chrome, Firefox, Safari, Opera, Internet Explorer, and on Android and iOS.

Written by

Last updated June 4, 2020 at 3:35 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.