我试图使<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;;
}
我注意到一些缺失的属性:
content: ''
上a::after
缺失。对于伪元素,content
属性可以为空""
,但必须指定。position: relative
需要在a
上,因为伪元素a::after
正在使用position: relative
。a::after
正在使用background-color: inherit
,但似乎没有任何可以继承的值。我给它一个值hotpink
现在,但这可以自定义为任何颜色。- 我在
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>