How can you get decorative dots or dashes between links in the sitemap hierarchy, using either CSS or images?

Question

In the footer of my clients site, I want to give the users total clarity about where things are on the website so that they can quickly navigate there.

So I will implement what looks like a nested set of links. In plain text, it should look like this. but just the blue dashes. I lined out in pen to separate the list items.

The code is below showing the selection of the last list item. But how would you either add dots using only CSS or using CSS to insert an image before it?

This is what I have so far and the accompanying code. In my example, the in the footer became a block element, but it was supposed to be inline, so disregard that because it will be fixed. I was going to add color to the dashes, but does not seem like the best option after experimentation. I was going to add pipes and dashes |----

Answer 1

You seem to have everything written inside the same list. If you use different lists inside each other, like in the right side of your top image, you can assign classes to each "level". Suppose you have:

<ul>
  <li> Item 1
     <ul>
        <li> Item a </li>
        <li> Item b </li>
     </ul>
  </li>
  <li> Item 2
     <ul>
        <li> Item c </li>
        <li> Item d </li>
     </ul>
  </li>
</ul>

You can give the different levels of the hierarchy some images using classes.

So for your first li it will be a background-image of, say |--. For li>li it would be |---. And for li>li>li it would be |----. One image for each level.

.nav ul li {background-image:url("image1.jpg"); padding-left:50px;}
.nav ul li ul li {background-image:url("image2.jpg"); padding-left:60px;}

For special items, for example the last item, you can use pseudoclasses like ul > li:last-child:

Answer 2

Using images is the only real way to pull this off. You may have some luck seatching for a glyph-based web font (like this) and using @font-face