Search code examples
htmlcssline-breaksdotted-line

How to use custom underline with breakline in CSS?

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 :

enter image description here

Is it possible do that, like below ?

enter image description here

and :

enter image description here

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>