我正在尝试学习如何在我的网页上添加下划线动画效果,但遇到了一个小问题。
这是我用于下划线效果的代码:
.cmn-t-underline {
position: relative;
}
.cmn-t-underline:after {
display: block;
position: absolute;
left: 0;
bottom: -10px;
width: 0;
height: 3px;
background-color: dimgrey;
content: "";
transition: width 0.3s;
}
.cmn-t-underline:hover {
color: #333;
}
.cmn-t-underline:hover:after {
width: 100%;
}
这是我的 CSS 代码:
<div class="col-sm-6">
<h1 class="text-center text-padding cmn-t-underline">Access Everywhere</h1>
<p class="text-center">Lorem ipsum dolor sit amet</p>
</div>
这就是动画完成后的效果:
我的问题是,如何才能使下划线仅保留在 H1 标题的正下方?我希望下划线从“A”开始并以“e”结束,但我很难弄清楚要在代码中放入什么来解决这个问题。如果有人能帮助我解决这个小问题,我将不胜感激。
提前致谢
最佳答案
您可以在 h1
上使用 display-table
来模拟没有 100% 宽度的类似 block 的行为...
body {
text-align: center;
}
h1 {
display: table;
margin: 0 auto;
}
.cmn-t-underline {
position: relative;
}
.cmn-t-underline:after {
display: block;
position: absolute;
left: 0;
bottom: -10px;
width: 0;
height: 3px;
background-color: dimgrey;
content:"";
transition: width 0.3s;
}
.cmn-t-underline:hover {
color: #333;
}
.cmn-t-underline:hover:after {
width: 100%;
}
<div class="col-sm-6">
<h1 class="text-center text-padding cmn-t-underline">Access Everywhere</h1>
<p class="text-center">Lorem ipsum dolor sit amet</p>
</div>
关于html - CSS 文本下划线动画问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32596773/