list-style-image
Definition
The list-style-image property sets an image as the marker for a list item. It replaces the default marker (usually a bullet point or number) with an image of your choice.
Examples
Setting list-style-image using a URL:
ul {
list-style-image: url('images/star.png');
}
Setting list-style-image using a gradient:
ol {
list-style-image: linear-gradient(to bottom, red, blue);
}
Setting list-style-image to none:
ul {
list-style-image: none;
}
Values
| Value | Description |
|---|---|
url() | Specifies the URL of an image to be used as the marker. |
none | Removes the marker from the list item. |
inherit | Inherits the value of list-style-image from the parent element. |
Best Practices
- Use images that are small and simple, as larger or more complex images may be difficult to see at smaller sizes or on lower-resolution screens.
- Make sure the image you choose is relevant to the content of the list, as it can help reinforce the meaning or theme of the list.
- Test the appearance of your list with different image formats and resolutions to ensure that it looks good across different devices and browsers.
- Consider using a fallback marker, such as a bullet point or number, for users who may not be able to see the image due to accessibility issues or slow connection speeds.
- Use a descriptive alt attribute for the image to provide context and improve accessibility for users with screen readers.
Browser Compatibility
| Chrome | Firefox | Safari | Internet Explorer | Microsoft Edge | Opera |
|---|---|---|---|---|---|
| Yes | Yes | Yes | Yes | Yes | Yes |