Underline CSS link mobile width

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.