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

Question

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

这是我想要达到的效果并且我做到了：

我在想是否可以简化我的代码。经过反复试验，我在下划线元素上使用了负数 margin-left 并使用 calc() 来计算其 width 为 100% + 2 * padding。在我看来，它是一个过于复杂的解决方案。如果没有 calc() 并且也许没有负边距，是否可以实现相同的效果？

请注意，添加包装器元素不是一个选项。它需要是一个普通的 <a> 元素。

:root {
    --link-color: #f80;
    --link-underline-padding: .5em;
}

a {
    color: var(--link-color);
    display: inline-block;
    padding: 0 var(--link-underline-padding);
    text-decoration: none;
}

a:after {
    background-color: var(--link-color);
    content: '';
    display: block;
    height: .1em;
    margin-left: calc(var(--link-underline-padding) * -1);
    margin-top: .2em;
    transition: width .5s;
    width: 0;
}

a:hover:after {
    width: calc(100% + var(--link-underline-padding) * 2);
}

I find <a href="#">dogs</a> pretty cool.

Answer 1

如果将 a 设置为 position: relative;，则可以使用 position: absolute; 和 left: 0px; 将其推过填充，然后只需使用 width: 100% 即可让它延伸整个长度。

:root {
    --link-color: #f80;
    --link-underline-padding: .5em;
}

a {
    position: relative;
    color: var(--link-color);
    display: inline-block;
    padding: 0px var(--link-underline-padding);
    text-decoration: none;
}

a:after {
    position: absolute;
    left: 0px;
    background-color: var(--link-color);
    content: '';
    display: block;
    height: .1em;
    margin-top: .2em;
    transition: width .5s;
    width: 0;
}

a:hover:after {
    width: 100%;
}

I find <a href="#">dogs</a> pretty cool.

Answer 2

一个简单的背景动画就可以做到：

a {
  background: linear-gradient(currentColor 0 0) 
    bottom left/
    var(--underline-width, 0%) 0.1em
    no-repeat;
  color: #f80;
  display: inline-block;
  padding: 0 .5em 0.2em;
  text-decoration: none;
  transition: background-size 0.5s;
}

a:hover {
  --underline-width: 100%;
}

I find <a href="#">dogs</a> pretty cool.

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

Text underline animation in CSS - the simplest way?

css

css-transitions

css-animations

css-variables