HTML and CSS Reference
In-Depth Information
As an alternative to the predefined markers, using the list-style-image property allows
a custom image to be used as the list bullet.
list-style-image : inherit | none | url(<url>)
The image path is specified inside of the CSS url function.
list-style-image: url(my-bullet.png)
This property overshadows any marker type selected with the list-style-type
property. Even so, it is a good idea to specify a list-style-type as a fallback in case the
custom bullet image is unavailable for any reason.
The list marker is normally positioned outside of the element box. list-style-position
provides an alternative: to place the bullet inside of the element box.
list-style-position : inherit | outside | inside
Selecting outside aligns each line of text with the start of the first line, whereas
inside causes successive lines of text to wrap underneath the marker. The inside value
also visually indents the marker, as shown in Figure 23-1 .
Figure 23-1. Outside and inside marker placement
list-style is the shorthand property for setting all the list properties. The values can be
set in any order because there is no ambiguity between them. Any one of the values can
also be omitted, in which case the default value for that property is used.
Search WWH ::

Custom Search