Below i have hardcoded dotted lines on my menu between the name and image, I cant figure out how to get dotted lines that adjust to the width between where i have them now.

This is the code below that i have. I basically want to remove the hardcoded ..... and make it better somehow with a repeated image inside or just something easier, how can i approach this? I have been boggled with this problem for some time now... Because on some browsers the dotted lines pushes the text down and if i just have those dots repeating somehow with a width or something that would be awesome.

  • My code is on the resources link. mystycs over 7 years ago

1 answer


Put the text of the link inside an inline element like span and give it a white background.

put a dotted image as a background on the <a> element and make it repeat and have the <a> element 100% width with margin to let the heading background image show through, or a variation of this idea?

I think you just need another element to hang your dots on.

Answered over 7 years ago by Tony Crockford