如何创建文本下划线动画?

Question

我试图使<a>标签元素在悬停下划线中动画，类似于本页上的第一个例子。问这个问题几乎感觉很愚蠢，因为教程就在那里，但我正在做的事情不工作，我不知道为什么。

这是我的CSS

#about-text-box a {
text-decoration: none;
font-size: 17pt;
font-family: 'Silkscreen', cursive;
color: #ECE0E7;
text-align: center;
width: 95%;
text-shadow: 2px 2px 2px #101400;
transition: 0.5s;
}
#about-text-box a:hover::after, #about-text-box a:focus::after {
opacity: 1;
transform: translate3d(0, 0.2em, 0);
}
#about-text-box a::after {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0.1em;
background-color: inherit;
opacity: 0;
transition: opacity 300ms, transform 300ms;;
}

Answer 1

我注意到一些缺失的属性:

1. content: ''上a::after缺失。对于伪元素，content属性可以为空""，但必须指定。
2. position: relative需要在a上，因为伪元素a::after正在使用position: relative。
3. a::after正在使用background-color: inherit，但似乎没有任何可以继承的值。我给它一个值hotpink现在，但这可以自定义为任何颜色。
4. 我在a上添加了cursor: pointer，所以它更符合你想要的结果。

希望这对你有帮助!

示例:(参见下面带有按钮的实时演示)

#about-text-box {
display: flex;
}
#about-text-box a {
display: block;
position: relative;
padding: 0.2em 0;
cursor: pointer;
text-decoration: none;
font-size: 17pt;
font-family: "Silkscreen", cursive;
color: #ece0e7;
text-align: center;
text-shadow: 2px 2px 2px #101400;
transition: 0.5s;
}
#about-text-box a:hover::after,
#about-text-box a:focus::after {
opacity: 1;
transform: translate3d(0, 0.2em, 0);
}
#about-text-box a::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0.1em;
background-color: hotpink;
opacity: 0;
transition: opacity 300ms, transform 300ms;
}

<div id="about-text-box">
<a>Hover this link</a>
</div>