How to use custom underline with breakline in CSS?

css, dotted-line, html, line-breaks

Solution

You could try this:

a {
  display: inline-block;
  max-width: 100px;
  text-decoration: none;
}

span {
  border-bottom: 1px dotted;
}

<a href='#'><span>click here to do something</span></a>

Problem

I would like to stylize my link with a background. When the link is short I have no problem with my background, but my link is too long, I have a break line and my background doesn't work anymore. I don't want use `text-decoration: underline` because it's not the same design (custom dotted with spaces between them) HTML : ``` <a href="#">Ceci est un menu très long</a> <a href="#">Blabl</a> ``` CSS : ``` a { background: url(dotted.jpg) repeat-x; } ``` Here is my problem : Is it possible do that, like below ? and :

Original source