Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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

share|improve this question
Something similar could be done with this. || demo: || github: – Joonas Jan 30 '13 at 21:04
up vote 3 down vote accepted

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

share|improve this answer
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 '13 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

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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