CSS中的文本下划线动画-最简单的方法？

当用户指向我网站上的链接时，我有一个动画下划线效果。下划线比文本本身宽一点，因为有一点水平填充

以下是我想要达到的效果，我做到了：

我在想是否有可能简化我的代码。经过一些尝试和错误，我在下划线元素上使用了负数

左边距

，并使用

calc（）

将其

宽度

计算为

100%+2*填充

。在我看来，这是一个过于复杂的解决方案。如果没有

calc（）

或者没有负裕度，是否可以达到同样的效果

---

需要注意的是，添加包装器元素不是一个选项。它需要是一个简单的

非常酷。

如果您将

a

设置为

位置：相对然后可以使用
位置：绝对和
左：0px
将其推过填充，然后使用
宽度：100%
使其延伸整个长度


：根目录{
--链接颜色：#f80；
--链接下划线填充：.5em；
}
a{
位置：相对位置；
颜色：var（--链接颜色）；
显示：内联块；
填充：0px var（--链接下划线填充）；
文字装饰：无；
}
a:以后{
位置：绝对位置；
左：0px；
背景颜色：var（--链接颜色）；
内容：''；
显示：块；
高度：.1米；
边缘顶部：.2米；
过渡：宽度5s；
宽度：0；
}
a:悬停：之后{
宽度：100%；
}
我觉得很酷。
一个简单的背景动画可以做到这一点：


a{
背景：线性渐变（currentColor 0）
左下角/
var（--下划线宽度，0%）0.1米
不重复；
颜色：#f80；
显示：内联块；
填充：0.5em 0.2em；
文字装饰：无；
过渡：背景尺寸0.5s；
}
a:悬停{
--下划线宽度：100%；
}
我觉得很酷。
嘿，你的答案真的很棒！我希望您不介意我选择另一个，因为它使
背景尺寸
更容易。我也喜欢你的方法@RoboRobok，肯定是更好的答案，谢谢你考虑了很多问题，我喜欢现在这么简单！我对它进行了一点编辑，以消除padding变量（因为padding现在只在一个位置使用），并添加了
--underline thickness
变量（因为我们在正常和悬停状态下都使用它）。再次感谢@RoboRobok我做了另一次编辑以避免使用两次厚度；）（更新：颜色相同）天哪，我忘了这样做是可能的，太棒了！现在删除
--下划线厚度
和
--链接颜色
怎么样？我不知道
currentColor
存在：D@RoboRobok是，如果需要，您可以删除它们；）谢谢你的编辑。我又改变了一件事——我将
--s
重命名为
--underline width
，以便更清楚地说明我们在那里做什么。我想我们现在有了完美的片段。