Markers are the bullets on a list with items.
The list-style-image property uses an image as marker.
The image marker displays as is, and cannot be resized.
A list with list-style-image set to a leaf icon.
<ul style="list-style-image: url('/img/css/leaf_icon.jpg')">
<li>Vincent Van Gogh</li>
<li>Henri Matisse</li>
<li>Paul Gauguin</li>
</ul>
list-style-image: none | url | initial | inherit;
| Value | Description |
|---|---|
none |
Default. No image will display. The element uses the list-style-type property instead. |
url |
Image path or URL. |
initial |
Sets the value to its default value. |
inherit |
Inherits the value from its parent element. |
Alternatively, a background image can also be used as marker.
This has the advantage that the iamges size is adjustable.
Here is an example:
<style>
.style-resize > li::before {
content: '';
display: inline-block;
height: 50px;
width: 50px;
background-size: cover;
background-image: url('/img/css/sunflowers-sm.jpg');
background-repeat: no-repeat;
margin-right: 10px;
background-position: center center;
vertical-align: middle;
}
</style>
<ul class="style-resize" style="list-style-type: none">
<li>Vincent Van Gogh</li>
<li>Henri Matisse</li>
<li>Paul Gauguin</li>
</ul>
This table shows when list-style-image support started for each browser.
 Chrome
|
1.0 | Dec 2008 |
 Firefox
|
1.0 | Nov 2004 |
 IE/Edge
|
4.0 | Sep 1997 |
 Opera
|
7.0 | Jan 2003 |
 Safari
|
1.0 | Jun 2003 |
