Laat ons toe een afbeelding voor onze lijst te gebruiken.
Een voorbeeld:
<head>
<style type="text/css">
ul { list-style-image: url("arrow.gif") }
</style>
</head>
<body>
<ul>
<li> eerste item
<li> tweede item
<li> derde item
</ul>
</body>
Ziet er zo uit:
eerste item
tweede item
derde item
In bovenstaand voorbeeld heb ik de afbeelding "arrow.gif" gebruikt. Deze afbeelding bevindt zich in dezelfde directory (map) als mijn HTML document. Als de afbeelding zich niet in dezelfde directory (map) bevindt dan moet dit gespecifieerd worden. Veronderstel dat de afbeelding kan gevonden worden op dit web adres (URL): http://www.mijnadres.com/afbeeldingen/ dan moeten we deze vorm gebruiken:
<body>
<ul class="outside">
<li>het eerste lijst item komt eerst
<li>het tweede lijst item komt als tweede
</ul>
<ul class="inside">
<li>het eerste lijst item komt eerst
<li>het tweede lijst item komt als tweede
</ul>
</body>
Resultaat:
het eerste lijst item komt eerst
het tweede lijst item komt als tweede
het eerste lijst item komt eerst
het tweede lijst item komt als tweede
De verkorte vorm is ook mogelijk. In dat geval gebruiken we het list-style element.
Een voorbeeld:
<head>
<style type="text/css">
ul { list-style: square }
</style>
</head>
<body>
<ul>
<li> eerste item
<li> tweede item
<li> derde item
</ul>
</body