如何创建一个与溢出一起工作的动画行:隐藏

Question

当我将overflow:hidden添加到h3元素时，我遇到了一个奇怪的问题。

我正试图悬停在h3元素上，看到绿色的低线从右侧添加，它可以工作，但如果我在h3元件上使用溢出，它将毫无理由地不可见(只需删除注释(

我该怎么修？

.center {
width: 50%;
height: 70%;
margin: 10% auto;
display: flex;
flex-direction: column;
align-items: center;
}
.center>h3 {
padding: 15px 20px 2px 20px;
position: relative;
z-index: 1;
border-bottom: 3px solid rgb(80, 90, 81);
box-sizing: content-box;
/*     overflow: hidden; */
}
.center>h3::before {
content: "";
box-sizing: content-box;
position: absolute;
top: 0;
left: 0;
border-bottom: 3px solid rgb(52, 219, 68);
height: 100%;
width: 100%;
z-index: -1;
transform: translateX(100%);
transition-duration: .9s;
}
.center>h3:hover:before {
transform: translateX(0);
}

<div class="center">
<h3>hi hi hi</h3>
<h3>hi hi hi</h3>
<h3>hi hi hi</h3>
<h3>hi hi hi</h3>
</div>

Answer 1

另一个只有背景的想法

.center {
width: 50%;
height: 70%;
margin: 10% auto;
display: flex;
flex-direction: column;
align-items: center;
}
.center>h3 {
padding: 15px 20px 5px 20px;
overflow: hidden;
background: 
linear-gradient(rgb(52, 219, 68) 0 0) bottom right/0%   3px,
linear-gradient(rgb(80, 90, 81)  0 0) bottom      /100% 3px;
background-repeat:no-repeat;
transition-duration: .9s;
}
.center>h3:hover {
background-size: 100% 3px;
}

<div class="center">
<h3>hi hi hi</h3>
<h3>hi hi hi</h3>
<h3>hi hi hi</h3>
<h3>hi hi hi</h3>
</div>

使用伪元素，你可以做如下操作：

.center {
width: 50%;
height: 70%;
margin: 10% auto;
display: flex;
flex-direction: column;
align-items: center;
}
.center>h3 {
padding: 15px 20px 5px 20px;
box-shadow:0 -3px 0 inset rgb(80, 90, 81) ;
overflow: hidden;
position:relative;
}
.center>h3::before {
content:"";
position:absolute;
left:0;
right:0;
bottom:0;
height:3px;
transform-origin:right;
transform:scaleX(0);
transition:0.9s;
background:rgb(52, 219, 68);
}
.center>h3:hover::before {
transform:scaleX(1);
}

<div class="center">
<h3>hi hi hi</h3>
<h3>hi hi hi</h3>
<h3>hi hi hi</h3>
<h3>hi hi hi</h3>
</div>