Html 如何创建使用overflow:hidden的动画线条？

当我向h3元素添加

overflow:hidden

时，我遇到了一个奇怪的问题

我试图将h3元素悬停，并从右侧看到绿色的低端添加，它可以工作，但如果我在h3元素上使用溢出，它将不可见（只是删除注释）

我怎样才能修好它

.center{
宽度：50%；
身高：70%；
利润率：10%自动；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
}
.center>h3{
填充：15px20px20px；
位置：相对位置；
z指数：1；
边框底部：3倍实心rgb（80,90,81）；
框大小：内容框；
/*溢出：隐藏*/
}
.center>h3:：之前{
内容：“；
框大小：内容框；
位置：绝对位置；
排名：0；
左：0；
边框底部：3倍实心rgb（5221968）；
身高：100%；
宽度：100%；
z指数：-1；
转化：translateX（100%）；
过渡持续时间：.9秒；
}
.center>h3:悬停：之前{
变换：translateX（0）；
}

嗨嗨嗨
嗨嗨嗨
嗨嗨嗨
嗨嗨嗨

另一个只有背景的想法

.center{
宽度：50%；
身高：70%；
利润率：10%自动；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
}
.center>h3{
填充：15px20px 5px20px；
溢出：隐藏；
背景：
线性梯度（rgb（5221968）0 0）右下角/0%3px，
线性梯度（rgb（80,90,81）0 0）底部/100%3px；
背景重复：无重复；
过渡持续时间：.9秒；
}
.center>h3：悬停{
背景尺寸：100%3px；
}

嗨嗨嗨
嗨嗨嗨
嗨嗨嗨
嗨嗨嗨

h3元素溢出它无缘无故不可见-->有一个原因，该元素溢出，您正在隐藏它如果我隐藏“中心”，它会剪切一些线，但可以工作，我如何在外线实现并使用悬停功能？为什么要隐藏中心？可以给出一个更完整的例子来说明溢出的必要性：隐藏？.center/我问另一种方法如何隐藏绿色元素，但悬停时继续工作为什么使用“框阴影”而不是边框底部？@LichayTiram因为溢出将隐藏边框框元素内的所有内容，因此您不能在边框顶部有溢出：隐藏这就是为什么我需要在边框内部模拟边框，以便能够在其顶部有一些内容酷，哇，感谢两种方式，您真的很专业