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



我试图使<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;;
}

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

  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>

相关内容

  • 没有找到相关文章

最新更新