CSS: Detailed explanation of the use of list-style-image

Do you understand the usage of the CSS list-style-image attribute? Here is a description. The list-style-image attribute uses an image to replace the markup of the list item. This attribute is designated as a Image of an ordered or unordered list item flag.

CSS list-style-image property list icon

Definition and usage

The list-style-image property uses an image to replace the markup of a list item.

Description

This attribute specifies an image as a symbol for an ordered or unordered list item. The placement of the image relative to the content of the list item is usually controlled using the list-style-position attribute.

Note: Always specify a "list-style-type" attribute in case the image is not available.

Example

Set the image as the item mark in the list:

ul  
{  
list-style-image:url("/i/arrow.gif");  
list-style-type:square;  
}

Browser support

All browsing All browsers support the list-style-image attribute.

Note: Any version of Internet Explorer (including IE8) does not support the attribute value "inherit".

Possible values ​​

Syntax:

list-style-image : none | url (url)

Parameters:

none: No image specified
url: Use an absolute or relative address to specify a background image

Description:

Sets or retrieves the image marked as a list item of the object.
If the list-style-image attribute is none or the specified image is unavailable, the list-style-type attribute will take effect.
The corresponding script feature is listStyleImage. Please see other books I have written.

Example:

ul.out { list-style-position: outside; list-style-image: url("images/ie.gif"); }

The above is the detailed content of CSS: Detailed explanation of the use of list-style-image. For more information, please follow other related articles on the PHP Chinese website!