CSS Examples Image Marker Lists

Author: CSS Drive

CSS makes it possible to use images for a list's markers. And through descendant selectors, different images can be shown depending on the level of the list item in question, as shown below:

• News
• Sports
• Webmaster
  • CSS Drive
  • PHP.net

The HTML:

<ul>
<li>News</li>
<li>Sports</li>
<li>Webmaster<ul>
    <li>CSS Drive</li>
    <li>PHP.net</li>
</ul>
</li>
</ul>

The CSS:

ul li{
list-style-type: square;
list-style-image:url(fold.gif);
padding-left: 3px;
}

ul li ul li{
list-style-image:url(list.gif);
}

Comments (4)