Html 下划线CSS链接移动宽度

我有这个css代码，它可以在大型桌面上正常工作。一旦切换到mobile，下划线就位于整个元素下。我想在句子中的单词下面加下划线。 任何帮助都将受到欢迎。 以下是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)
}

---

现场预览：

好的，我找到了问题，是关于位置：绝对； 如果更改底部，可以检查线位置：0；到顶部：0； 我必须考虑如何欺骗它，如果有办法解决它，目前我没有任何解决办法

h2>a{
位置：相对位置；
颜色：#000；
线高：50px；
文字装饰：无；
}
h2>a:悬停{
颜色：#000；
}
h2>a：之前{
内容：“；
位置：绝对位置；
宽度：100%；
高度：2倍；
底部：0；
左：0；
背景色：#000；
可见性：隐藏；
-webkit转换：scaleX（0）；
变换：scaleX（0）；
-webkit转换：所有0.3都易于输入输出0；
过渡：所有0.3秒均为0秒；
}
h2>a:悬停：之前{
能见度：可见；
-webkit转换：scaleX（1）；
变换：scaleX（1）；
}
h2>a>span{
位置：相对位置；
颜色：#000；
文字装饰：无；
}
h2>a>span:悬停{
颜色：#000；
}
h2>a>span:之前{
内容：“；
位置：绝对位置；
宽度：100%；
高度：2倍；
排名前40名；
左：0；
背景色：#000；
可见性：隐藏；
-webkit转换：scaleX（0）；
变换：scaleX（0）；
-webkit转换：所有0.3都易于输入输出0；
过渡：所有0.3秒均为0秒；
}
h2>a>span:悬停：之前{
能见度：可见；
-webkit转换：scaleX（1）；
变换：scaleX（1）；
}

---

看看这个带有css的大截短文本效果，真神奇我现在就试过了，只需删除第一个文本装饰：无；声明以查看underline属性按预期运行。必须检查继承，检查浏览器渲染的属性、值以及它们的来源。这个问题，如果有（你清除缓存了吗？）可能在你的另一段代码中。我刚刚更新了注释，如果你按照链接缩小窗口，你就会明白我在说什么。非常感谢。问题是，如果你把句子在400px（屏幕宽度）以下变长变窄，唯一的下划线单词就是最后一个。无论屏幕大小如何，我都希望整句话不加修饰。