html - CSS 文本下划线动画问题

Question

我正在尝试学习如何在我的网页上添加下划线动画效果，但遇到了一个小问题。

这是我用于下划线效果的代码:

.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”结束，但我很难弄清楚要在代码中放入什么来解决这个问题。如果有人能帮助我解决这个小问题，我将不胜感激。

提前致谢

Answer 1

您可以在 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>