如何创建适用于 overflow:hidden 的动画线条？

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>

如何创建适用于 overflow:hidden 的动画线条？

How to create an animated line that works with overflow:hidden?

html

css

css-transitions