Underline CSS link mobile width - html

Question

I have this css code and it works fine on large desktops. Once i switch to mobile the underline is under the whole element. I would like to have the underline only under the words in sentence.
Any help to achive this will be welcomed.
Here is the HTML:
a class="underline-link"
href="#">Made with Lorem Ipsum Dolor Sit Amed
And here is the CSS:
.underline-link:after {
background-color: #0982ae
}
.underline-link:hover {
color: #0982ae
}
.underline-link:after {
content: "";
height: 1px;
left: 0;
opacity: 0;
pointer-events: none;
position: absolute;
top: 100%;
transform: translateY(1px);
transition: all .15s cubic-bezier(.39, .575, .565, 1);
transition-property: opacity, transform;
width: 100%
}
.underline-link:focus {
outline: none
}
.underline-link {
font-family: -apple-system, BlinkMacSystemFont, segoe ui, avenir next,
avenir, helvetica neue, helvetica, ubuntu, roboto, noto, arial, sans-serif;
-webkit-font-smoothing: subpixel-antialiased;
text-decoration: underline;
color: #b3b3b3;
cursor: pointer;
position: relative;
display: inline-block;
color: #087096;
font-size: 14px;
font-weight: 400;
text-decoration: none;
-moz-osx-font-smoothing: grayscale
}
.underline-link:hover {
text-decoration: none
}
.underline-link:focus:after, .underline-link:hover:after {
opacity: 1;
transition-delay: .2s;
transition-duration: .15s;
transform: translateY(-3px) translateZ(0)
}
Live preview:On Codepen

Answer 1

Ok i found the issue, it's about position: absolute;
you can check the line position if you change bottom: 0; to top: 0;
i've to think how to trick over it and if there's some way to solve it, at the moment i don't have any solution on mind.
h2 > a {
position: relative;
color: #000;
line-height:50px;
text-decoration: none;
}
h2 > a:hover {
color: #000;
}
h2 > a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
h2 > a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
h2 > a >span {
position: relative;
color: #000;
text-decoration: none;
}
h2 > a >span:hover {
color: #000;
}
h2 > a > span:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
top: 40;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
h2 > a > span:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
<h2><a><span>Look at this large truncated text effect with css, it's magic! </span></a></h2>
i tried with adding a span and setting the same but on top but i can't get rid on how moove this line, it keeps up due to display and positions so... i think this, as you thinked, can't work, sorry.