Geek Answers Handbook

How to make the space between a multi-line link clickable

I want to associate a sentence with a length of 3 lines. It seems simple enough, but I cannot find an elegant way to make space between the lines that can be clicked. Here is my code:

<style>
    a {
        color: #000;
        border-bottom: 1px solid #000;
        padding-bottom: 5px;
        text-decoration: none;
        font-size: 20px;
        line-height:40px;
    }
</style>

<a href="#">Lorem ipsum dolor sit amet,<br/>
consectetur adipiscing elit,<br/>
sed do eiusmod tempor</a>

Fiddle: http://jsfiddle.net/zbxyjdvb/

+4
source share
3 answers

You cannot put a div (block) element inside span (inline). Does a div ever fit inside an anchor correctly?

Convert the anchor to display: inline-block, then add an extra spacing to restore the underline in the text.

HTML:

<a href="#"><span class="underline">Lorem ipsum dolor sit amet,<br/>
consectetur adipiscing elit,<br/>
    sed do eiusmod tempor</span></a>

CSS

a {
    color: #000;
    text-decoration: none;
    font-size: 20px;
    line-height:40px;
    display: inline-block;
}
.underline {
    border-bottom: 1px solid #000;
    padding-bottom: 5px;
}

demo: http://jsfiddle.net/zbxyjdvb/9/

+3

<a> a <div>.

a {
    color: #000;
    border-bottom: 1px solid #000;
    padding-bottom: 5px;
    text-decoration: none;
    font-size: 20px;
    line-height:40px;
}
<a href="#">
   <div>Lorem ipsum dolor sit amet,<br/>
consectetur adipiscing elit,<br/>
    sed do eiusmod tempor
   </div>
</a>
Hide result
+1

You can also use pseudo-elements to achieve this. So HTML does not change:

<a href="#">Lorem ipsum dolor sit amet,<br/>
consectetur adipiscing elit,<br/>
sed do eiusmod tempor</a>

But CSS:

   a {
    color: #000;
    border-bottom: 1px solid #000;
    padding-bottom: 5px;
    text-decoration: none;
    font-size: 20px;
    line-height:40px;
    position:relative;

}
a:before {

    content:"";
    position:absolute;
    cursor:pointer;
    left:0px;
    top:0px;
    width:100%;
    height:400%;
    /*background-color:#666;*/

}

Demo: http://jsfiddle.net/zbxyjdvb/11/

Depending on your size, a blockyou will have to play a little with height ...

+1
source

More articles:


All Articles