You want to use your own graphic for a list marker. For example, Figure 4-4 uses a diamond image.
Use the list-style-image
property to use a graphic for a bullet
marker:
ul { list-style-type: disc; list-style-image: url(bullet.gif); }
Set the location of the image you want to use as a marker as the
value of the list-style-image
property. You
can’t control the size of the image used as a list
marker through CSS, so the image you specify should already be at the
correct size. Images that are too large might interfere with the
legibility of the list item or the marker might not be displayed
entirely in the viewport, as shown in Figure 4-5.
When creating custom bullets, make sure they are of the appropriate
size to compliment the design of your web page.
The value for the image marker is inherited,
meaning that nested lists
pick up the image as the marker as does the parent. To stop this
inheritance, the value of none
needs to be set for
the child lists.
ul { list-style-type: disc; list-style-image: url(bullet.gif); } ul ul {list-style-type: none:}
Always include the
list-style-type
property to provide a fallback should the
image not be usable. In the Solution the list marker
disc
is used if the image,
bullet.gif
, can’t be displayed.
Recipe 4.4 on creating custom text markers;
the CSS 2.1 specification
for
list-image-type
at http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-image
.
Get CSS Cookbook now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.