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:
- If the image has a intrinsic width and height, the used width and height are the intrinsic width and height.
- 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.
- 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.
- 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 PlaygroundBrowser s162l
The list-style-image
property is ed in all major browsers: Chrome, Firefox, Safari, Opera, Internet Explorer, and on Android and iOS.