HTML and CSS Reference
In-Depth Information
Using an Image as a List Item Marker
There may come a time when the default list-style-type property values are not
enough, and we want to customize our own list item marker. Doing so is most commonly
accomplished by placing a background image on each <li> element within a list (see Fig-
ure 8.9 ) .
Figure 8.9 An unordered list with a custom list item marker by way of a background
The process includes removing any default list-style-type property value and
adding a background image and padding to the <li> element.
In detail, the list-style-type property value of none will remove existing list item
markers. The background property will identify a background image, along with its po-
sition and repeat value, if necessary. And the padding property will provide space to the
left of the text for the background image.
1. <ul>
2. <li>Orange</li>
3. <li>Green</li>
4. <li>Blue</li>
5. </ul>
Click here to view code image
1. li {
2. background: url("arrow.png") 0 50% no-repeat;
3. list-style-type: none;
4. padding-left: 12px;
5. }
Search WWH ::

Custom Search