A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://webplatform.github.io/docs/css/properties/list-style-image below:

list-style-image · WebPlatform Docs

list-style-image Summary

This property sets the image that will be used as the list item marker. When the image is available, it will replace the marker set with the ‘list-style-type’ marker. That also means that if the image is not available, it will show the style specified by list-style-property

Overview table
Initial value
none
Applies to
elements with ‘display: list-item’
Inherited
Yes
Media
visual
Computed value
absolute URI or ‘none’
Animatable
No
CSS Object Model Property
listStyleImage
Syntax Values
none
Default. No image is specified.
url(path/to/image.png)
Location of the image, where path/to/image.png is an absolute or relative URL. More details can be found at the css/functions/url() section.
inherit
Takes the same specified value as the property for the element’s parent. (Acts similarly to other uses of inherit in CSS.)
Examples

The following examples shows the different possible values you can use for the list-style-image property. It also contains an example to show what happened when an unavailable image is not provided and how to use ‘none’ to break the inheritance.


.first-list {
    list-style-image: url(/docs/w/skins/webplatform/images/logo.svg);
}


.second-list {
    list-style-image: url(favicon.ico);
}


.third-list {
    list-style-image: url(/docs/w/skins/webplatform/images/logo.svg);
}


.third-list .third-list-inner-non-inherit {
    list-style-image: none;
}


.fourth-list {
    list-style-image: url(http://wrong.url.used.com);
    list-style-type: disc;
}

View live example

Usage 
 The property has limited positioning options for the background image, and in some circumstances doesn’t work at all in IE.

So it has become a far more common practice to simply set a background image on the list items.

Notes Remarks

When the image is available, it replaces the marker that is set with the list-style-type marker. If the left margin of the list item is set to 0 using one of the margin properties, the list-item markers do not show.

Related specifications
CSS Lists and Counters Module Level 3
Working Draft
CSS Level 2 (Revision 1)
Recommendation
See also Related articles Generated and Replaced Content Related pages Attributions

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4