-1

I've searched and everyone says you have to use border to create a custom underline.

But I want my anchor text to all be underlined even when it breaks into multiple lines (like on a narrow screen.)

HTML: <a>This is a bunch of text which I want to underline and which breaks over 2 lines on a mobile screen.</a>

a {border-bottom: 1px solid} does NOT span multiple lines.

a {text-decoration: underline} is too thick.

Is there any way to accomplish this?

Machavity
  • 30,841
  • 27
  • 92
  • 100
Dan
  • 1,257
  • 2
  • 15
  • 31
  • By default, `border-bottom: 1px solid` on an `a` element does span multiple lines. You're doing something else to stop that from happening. – Alohci Dec 22 '15 at 21:49
  • 1
    @Alohci I see, you're right, it must be because I have `a {display:table}`. I'll use the span trick from Nenad below – Dan Dec 22 '15 at 21:55

2 Answers2

1

It will work just use span inside a

a {
  text-decoration: none;
}

span {
  border-bottom: 1px solid red;
}
<a href="#"><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem itaque illum sunt dicta ratione similique numquam a iste iure debitis velit quidem vitae quisquam vel consequuntur, ea atque deserunt maiores!</span></a>
Nenad Vracar
  • 118,580
  • 15
  • 151
  • 176
  • Ah! Great, thanks! Is there any CSS trick to apply this to all anchors? Or will I have to manually add the span to each one? – Dan Dec 22 '15 at 21:51
  • 1
    One option would be to add `span` to each `a` with JS https://jsfiddle.net/2Lzo9vfc/421/ – Nenad Vracar Dec 22 '15 at 22:08
0

well seems that you don't really need to nest any span, force the A tag to its original behavior which is "inline", and if is hard to do add the "!important" flag... you can also change the properties from it in any of its states so you can play with color and stroke width for example

a {
  text-decoration: none;
  position: relative;
  transition: color 350ms linear 0ms, border-color 350ms linear 0ms, top 350ms linear 0ms;
}
a:link, a:visited {
  top: 0em;
  color: #228bb2;
  border-bottom: 2px solid #b25822;
}
a:hover {
  top: 0em;
  color: #b222a6;
  border-bottom: 2px solid #b2a622;
}
a:active {
  top: 0.1em;
}
        <p>
        Lorem ipsum dolor sit amet, consectetur <a href="#">adipiscing elit, sed do eiusmod
        tempor</a> incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
        nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
        irure dolor in reprehenderit <a href="#">in voluptate velit esse cillum dolore eu fugiat nulla
        pariatur. Excepteur sint occaecat cupidatat non proident</a>, sunt in culpa qui officia
        deserunt mollit anim id est laborum.
        </p>
wolfitoXtreme
  • 111
  • 3