'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

htmlcssline-breaksdotted-line


Solution 1:[1]

You can try a hudge margin right, even if that sounds strange :) : DEMO

a {
    border-bottom:1px dotted;
    text-decoration:none;
    margin-right:100%;
}

inline, but breaks line

Solution 2:[2]

You could try this:

HTML :

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

CSS : 

a{
 display:inline-block;
 max-width:100px;
 text-decoration:none;
}
span{
 border-bottom: 1px dashed;
}

DEMO

Solution 3:[3]

If you want personnalised design you have border-image also but Ie11...

Solution 4:[4]

There is no need to add images for dotted underlines. You can simply use css's border-bottom property for the same.

<a href="#">Ceci est un menu très bla bla bla bla nla bla bla bla nla</a> 

a{
  border-bottom : 2px dotted #CCC;
  text-decoration : none;  
 }

Visit http://jsfiddle.net/mijoemathew/zhp6D/ for testing the code.

Solution 5:[5]

You can do this in modern browsers with the border-image property: http://codepen.io/pageaffairs/pen/Gdxpg

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

div {
    width: 120px;
}

a {
    text-decoration: none;  
    line-height: 1.6em; 
    text-transform: uppercase;
    border-width: 0 0 9px 0;
    -webkit-border-image: url(http://pageaffairs.com/sp/so-24554400/border.png) 9 repeat; /* Safari */
    -o-border-image: url(http://pageaffairs.com/sp/so-24554400/border.png) 9 repeat;; /* Opera */
    border-image: url(http://pageaffairs.com/sp/so-24554400/border.png) 9 repeat;;
}

</style>
</head>
<body>

<div><a href="">Some text with an underline and background</a></div>

</body>
</html>

Solution 6:[6]

Just leave out the span and make the a{display:inline}.

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

a {
 display:inline;
 text-decoration:none;
 border-bottom: 1px dotted;
}

Fiddle

Cleaner and works like a charm.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 G-Cyrillus
Solution 2 J Prakash
Solution 3 AlexDom
Solution 4 Mijoe
Solution 5
Solution 6 Matthias

Related Questions