CODEWITHSUNDEEP
htmlcssline-breaksdotted-line
Steffi
Steffi

Reputation: 7057

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

Upvotes: 5

Views: 7165

Answers (7)

T J
T J

Reputation: 43156

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>

Upvotes: 4

Juni
Juni

Reputation: 737

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.

Upvotes: 0

ralph.m
ralph.m

Reputation: 14345

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>

Upvotes: 0

Mijoe
Mijoe

Reputation: 256

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.

Upvotes: 0

J Prakash
J Prakash

Reputation: 1333

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

Upvotes: 1

AlexDom
AlexDom

Reputation: 701

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

Upvotes: 0

G-Cyrillus
G-Cyrillus

Reputation: 105903

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

Upvotes: 1

Related Questions