CSS Text下划线动画问题

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％宽度的块状行为...

 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> 

Answer 2

将h1的显示更改为inline-block

 .cmn-t-underline { position: relative; display: inline-block; } .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>