HTML and CSS Reference
In-Depth Information
list-style-image
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.
list-style-position
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
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.
