Taking the same unordered list as our previous example, let’s turn it into a horizontal navigation bar, but with a little more decoration than our earliest demonstration of the concept.

The markup remains unchanged:

1. <ul id=nav"><li><a href="#">Home</a></li><li><a href="#">About Us</a></li>
2. <li><a href="#">Order</a></li><li><a href="#">Privacy Statement</a></li>
3. <li><a href="#">Contact</a></li></ul>

Let’s say that this time we want a black diamond between each navigational element, from left to right. We could add a graphic via the list-style-image property, but there is a more elegant way. First, our base CSS:

1. ul#nav { padding-left: 0; text-align: centre; font-size: smaller;
2. font-family: "Bell Gothic Std Bold", sans-serif; text-transform: uppercase; }
3. ul#nav li { display: inline; padding: 2em; }
4. ul#nav li a { text-decoration: none; color: #000; }

Rather than trying to introduce a graphic, we’ll use built-in HTML entity characters to generate them, via the ::before pseudo-element selector:

1. ul#nav li::before { content: "\2666"; }

This is not the usual expression of HTML entities that we are accustomed to – rather, this is the hex version of the entity, with an escape character before it. We can’t use named HTML entities (&dims;) or the decimal version thereof (&#9830), but must instead use an escaped hex version in both CSS and JavaScript. (The backlash is an escape character in CSS, JavaScript, PHP, and many other languages).

You’ll likely find that you need to add more adding padding to the list items, as well as removing padding from the left of unordered list.

In time, list-style-type should support the CSS3 value option of diamond, which will make things somewhat easier in future.

There is one remaining problem: that the diamond appears in front of every navigational list item, and doesn’t really work as an aesthetically pleasing divider, especially if we make this entire design as a horizontally-oriented layout.

We need to turn off the first diamond. To do this in the most browser-compatible way, we will apply an id to the first list-item. (IE6 does not understand first-child)

1. ul#nav li#firstnav::before { content: none; }

list-style-image

We have covered background-image in-depth previously, and it can be applied to list items, as well as any other element. list-style-image has a very similar syntax. Let’s say that we wanted to have each navigational item preceded by a small sigil. (“Straight & Narrow” having been recently purchased by Evil Incorporated in a hostile takeover, who are in the process of rebranding the site.)

1. ul#nav li { list-style-type: none; list-style-image: url('sigil.png'); }

As you can see, list-style-image takes on the same kind of value as background-image, as a path to the file (here, we are assuming that sigil.png is in the same location as the page itself.)

Note that the image used will often need to be adjusted in position, either by adding or removing pixels from the bitmap, or by utilizing vertical-align or other CSS on the li elements; and, as we set background-color whenever we use background-image to cover the contingency that the image will not load, we set list-style-type when we use list-style-image for the same reason.

Solution flowchart for creating decorated lists:

The solution workflow for creating decorated lists becomes apparent:

1. See if the decoration already exists as a value for list-style-type
2. If not, determine if the decoration can be created using a border or outline style
3. If unsuccessful, see if there is a Unicode character that you can use instead, created via generated content
4. If none of the above steps work, apply the decoration as a background-image or a list-style-image