我正在尝试为我的网页上的一个词制作下划线动画。它有效,但下划线显示在 div 下方,文本在其中。您可以在片段中看到 div 应该填满整个显示,但现在您必须向下滚动才能看到下划线。如何让它显示在文本下方?
body {
margin: 0;
padding: 0;
}
div {
width: 50%;
height: 100vh;
text-align: center;
line-height: 100vh;
font-size: 150%;
top: 0;
-webkit-transition: font-size 0.5s;
-moz-transition: font-size 0.5s;
-o-transition: font-size 0.5s;
transition: font-size 0.5s;
}
div:hover {
font-size: 200%;
}
a {
display: inline-block;
position: relative;
padding-bottom: 3px;
}
a:after {
content: '';
display: block;
margin: auto;
height: 3px;
width: 0px;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
a:hover:after {
width: 100%;
background: blue;
}
<div style="background-color: rgb(64, 64, 64); color: rgb(255, 255, 255); float: left;">
<a>Webpage</a>
</div>
<div style="background-color: rgb(255, 255, 255); color: rgb(64, 64, 64); float: right;">
<a>Photos</a>
</div>
最佳答案
anchor 的行高在父级修改。
恢复默认值
body {
margin: 0;
padding: 0;
}
div {
width: 50%;
height: 100vh;
text-align: center;
line-height: 100vh; /* this value is inherited by the a */
font-size: 150%;
top: 0;
-webkit-transition: font-size 0.5s;
-moz-transition: font-size 0.5s;
-o-transition: font-size 0.5s;
transition: font-size 0.5s;
}
div:hover {
font-size: 200%;
}
a {
display: inline-block;
position: relative;
padding-bottom: 3px;
line-height: initial; /* added */
}
a:after {
content: '';
display: block;
margin: auto;
height: 3px;
width: 0px;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
a:hover:after {
width: 100%;
background: blue;
}
<div style="background-color: rgb(64, 64, 64); color: rgb(255, 255, 255); float: left;">
<a>Webpage</a>
</div>
<div style="background-color: rgb(255, 255, 255); color: rgb(64, 64, 64); float: right;">
<a>Photos</a>
</div>
关于html - div 内的 CSS 文本悬停下划线动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41472589/