CSS下划线动画根本不起作用

Question

我正在尝试制作一个下划线动画，它从中间延伸到的两侧

我从网上找到的一个例子中复制了代码，这个例子有效，但在我的上没有

我已经在下面的jsfiddle上添加了代码

您正在css的开头查找.htext:after和.htext:after:hover

https://jsfiddle.net/wvm2sfp0/1/

body {
background: rgb(14, 13, 13);
color: white;
width: 100%;
}
header {
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
background: linear-gradient(to top, rgba(0, 0, 0, 0), rgb(0, 0, 0, 0.8));
}
a {
text-decoration: none;
color: inherit;
}
p {
color: white;
}
.div1 {
background-image: url(../images/Group 10.png);
}
.htext {
margin-right: 3%;
font-size: 0.75vw;
transition: text-decoration 0.3s;
}
.htext:after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: 0;
left: 0;
background-color: #54B3A1;
transform-origin: center;
transition: transform 0.25s ease-out;
margin-bottom: -20px;
}
.htext:after:hover {
transform: scaleX(1);
transform-origin: center;
}
.logo1 {
margin-right: 10%;
height: 7%;
width: 8%;
}
.logo2 {
margin-right: 1.5%;
}

<div class="div1">
<header>
<img src="images/viennalogo.png" class="logo1">
<a href="#" class="htext">
<p>HOME</p>
</a>
<a href="#" class="htext">
<p>BRANDS WE WORK WITH</p>
</a>
<a href="#" class="htext">
<p>BRAND GALLERY</p>
</a>
<a href="#" class="htext">
<p>NEWS</p>
</a>
<a href="#" class="htext">
<p>ABOUT US</p>
</a>
<a href="#" class="htext">
<p>CONTACT</p>
</a>
<a href="#" class="logo2"><img src="images/Facebook.png"></a>
<a href="#" class="logo2"><img src="images/Instagram.png"></a>
<a href="#" class="logo2"><img src="images/Twitter.png"></a>
</header>
</div>

Answer 1

对于下划线扩展，我不会使用scaleX(原因很多(。。。

相反，试试这个(我希望这是你想要的：

.htext {
margin-right: 3%;
font-size: 0.75vw;
transition: text-decoration 0.3s;
display: inline-block;
padding: 15px 20px;
position: relative;
}
.htext:after {
background: none repeat scroll 0 0 transparent;
bottom: 0;
content: "";
display: block;
height: 2px;
left: 50%;
position: absolute;
background: #54B3A1;
transition: width 0.3s ease 0s, left 0.3s ease 0s;
width: 0;
}
.htext:hover:after {
width: 100%; 
left: 0; 
}

要做到这一点，请确保.htext类具有相对位置，并且.htext:after对此是绝对的。