CSS Text下划线动画问题

Question

I'm trying to learn how to add an underline animation effect on my webpage, but am having a small issue.

Here's the code I used for the underline effect:

.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%;
}

And here's the code on my 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>

And this is how it comes out once the animation is done:

My question is, how do I make it so that the underline only stays directly under the H1 header? I want the underline to start at 'A' and end at 'e', but I am having a hard time figuring out what to put in the code to fix this. I would really appreciate if someone can help me with this small issue.

Thanks in advance

Answer 1

You could use display-table on your h1 to simulate block like behaviour without the 100% width...

 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

Change the display of the h1 to 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>