Underline long url - css

Question

On mobile devices with a width < 400px underlined links with long text breaks in two lines and just the second line will be underline.
How can i solve this problem.
CSS code:
a {
position: relative;
display: inline-block;
cursor: pointer;
color: #1a1a1a;
text-decoration: none;
}
a:after {
position: absolute;
content: "";
left: 50%;
transform: translateX(-50%);
bottom: 0;
width: calc(100% - 5px);
min-height: 2px;
height: .15em;
background: #1a1a1a;
transition: all .15s cubic-bezier(.25,.46,.45,.94);
}
a:hover:after {
width: 105%;
}

Answer 1

With this you have removed the text underline
text-decoration: none;
And then you replace it with a line in a a:after, this is how this is expected to work and if you want to revert it remove the text-decoration and a:after block.

Answer 2

It is because you converted <a> to inline block element. just remove that display: inline-block; applied to <a> and it will work.
By default <a> tags are inline elements. So there is no need of applying display: inline-block for . But in case from some where <a> tag is inheriting some other display properties, the you have to apply/overwrite display: inline to your <a> element.

Answer 3

Allthough I would recommend using the text-decoration property as mentioned in previous answers, you may wrap the links content in an inline element and apply some margin/padding to use the border bottom property. Then you may animate the underline in one or more lines.
div {
width: 210px;
}
a {
position: relative;
display: inline-block;
cursor: pointer;
color: #1a1a1a;
text-decoration: none;
padding-left: 10px;
padding-right: 10px;
width: 100%;
margin-bottom: 20px;
}
span {
box-sizing: content-box;
position: relative;
left: 0;
border-bottom: 3px solid #1a1a1a;
transition: all .15s cubic-bezier(.25, .46, .45, .94);
}
a:hover span {
margin: 0 -10px;
padding: 0 10px;
border-bottom-color: navy;
}
<div>
<span>Short link</span>
<span>Really long link text here that breaks into 2 lines</span>
</div>