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. Result of the code 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 |---- current footer


2 Answers 2


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:

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

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:

enter image description here

  • Yes, thanks. the image of the code was the beginning as the sub-lists were expanded. So your question answers the html structure. Now I just need to finish working on the CSS to select the corresponding items based on first-of-type and last-of-type because they will not have the same images.
    – JGallardo
    Jan 30, 2013 at 20:55

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.