Css 如何在文本的正下方使用伪元素画一条线并忽略填充？

我想在链接下面画一条线，并在其上应用动画，所以我使用伪元素。它会按预期生成行，但如果链接周围有较大的填充，则该行会显示得很远。有没有一种方法可以忽略填充并在文本的正下方画一条线

a{
位置：绝对位置；
填充：20px0；
最高：50%；
左：50%；
利润上限：-30px；
左边距：-30px；
线高：20px；
}
a:以后{
位置：绝对位置；
底部：0；
左：0；
宽度：0；
内容：''；
过渡：宽度3s；
显示：块；
}
a:悬停：之后{
宽度：100%；
边框顶部：1px实心#333；
}

---

链接文本

您只需删除绝对位置即可，因为伪位置设置为

：after

以使其正好位于文本之后

a{
位置：绝对位置；
填充：20px0；
最高：50%；
左：50%；
利润上限：-30px；
左边距：-30px；
线高：20px；
边框：1px纯水；
}
a:以后{
内容：“；
显示：块；
边框顶部：1px实心#333；
宽度：0；
过渡：宽度3s；
}
a:悬停：之后{
宽度：100%；
}

---

链接文本

共享类似的工作代码，以便轻松解决问题。请使用

文本装饰：下划线

make it

bottom:Xpx

其中X是您的padding@dfsq他想应用animationgood one，我还要补充一点，调整线条高度将控制线条与文本的距离；）正是我想要的，不知道静态位置，太简单了！