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

Question

I want to link a sentence that's 3 lines long. It seems simple enough, but I can't figure out an elegant way to make the space between the lines clickable too. Here's 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/

score 5 · Accepted Answer · edited May 23 '17 at 12:03

5

You can't put div (block) inside span (inline) element. Is putting a div inside an anchor ever correct?

Convert Anchor to display: inline-block, then user extra span to restore underlines in 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/

edited May 23 '17 at 12:03

Community

1
1

answered Sep 01 '15 at 19:32

Dariusz Sikorski

4,309
5
27
44

actually, I just realized that the width of the entire block is a link. that would be ok if it wasn't noticeable, but here's a more accurate representation of my copy: [http://jsfiddle.net/zbxyjdvb/12/](http://jsfiddle.net/zbxyjdvb/12/) is there a way to only link the text? – Michelle Sep 01 '15 at 20:04

score 1 · Answer 2 · answered Sep 01 '15 at 19:40

You can also use pseudo-elements to achieve this. So, HTML is not changed:

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

But, CSS is:

   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 a block size, you will have to play with height a little...

score 1 · Answer 3 · answered Dec 14 '20 at 19:50

You could add vertical padding to the a element to increase the area it covers which is clickable, without affecting the layout, or making surrounding text clickable.

The amount of padding you need would be the difference between the line height and the font size. In your case the line height is 40px and font size 20px, so you'd need 20px of vertical padding to cover the gap. You already have 5px as bottom padding plus a 1px border, so would need to add 14px of top padding (as you can't increase the bottom padding without making the border appear lower).

Fiddle: http://jsfiddle.net/sjwa7bf1/

score 0 · Answer 4 · answered Sep 01 '15 at 19:26

Wrap an <a> around 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>

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

4 Answers4