Html 设置底线和顶线的动画，使其在下面/上面相交

我一直在研究一个元素，其中“边界”或下/上边界将在元素的左侧和右侧缓慢过渡

到目前为止，我已经做到了：

。中间滑出：悬停{
字体大小：30px；
过渡：字体大小2秒；
}
.黑暗{
背景色：黑色；
显示：内联块；
最小宽度：200px；
最小高度：300px；文本对齐：居中；
光标：指针；
}
.黑色h1{
颜色：白色；
文本对齐：居中；
}
.从中间滑出{
显示：内联块；
位置：相对位置；
垫底：3件；
}
.从中间滑出h1：之后{
内容：''；
显示：块；
保证金：自动；
高度：3倍；
宽度：0px；
背景：透明；
过渡：宽度2秒，背景色5秒；
}
.从中间滑出：悬停h1:之后{
宽度：50%；
背景#b7d333；
}
.从中间滑出h1：之前{
内容：''；
显示：块；
保证金：自动；
高度：3倍；
宽度：0px；
背景：透明；
过渡：宽度2秒，背景色5秒；
}
.从中间滑出：悬停h1:之前{
宽度：50%；
背景#b7d333；
左边框：1px纯黑；
}

常见问题

在

h1

内部使用另一个元素，如

span

，并在其上设置左右边框效果

例如

Html

---

在

h1

内部使用另一个元素，如

span

，并在其上设置左右边框效果

例如

Html

---

你的大脑在完成之后，它将保持边界状态？你的大脑在完成之后，它将保持边界状态？嘿，虽然过渡延迟是一个开始，但它并不完全是我想要的。我希望顶部和底部的“边框”完全按原样操作，但在h1文本的左右两侧有类似的效果，悬停时在文本周围慢慢绘制边框。是的，但理想情况下边框不会只是出现，而是像当前正在绘制的顶部和底部一样“绘制”。很好，这正是我想要达到的目标！谢谢你的帮助。嘿，虽然过渡延迟是一个开始，但这并不是我想要的。我希望顶部和底部的“边框”完全按原样操作，但在h1文本的左右两侧有类似的效果，悬停时在文本周围慢慢绘制边框。是的，但理想情况下边框不会只是出现，而是像当前正在绘制的顶部和底部一样“绘制”。很好，这正是我想要达到的目标！谢谢你的帮助。

<div class="dark sliding-middle-out">
  <h1 class=""><span>FAQs</span></h1>
</div>

.sliding-middle-out h1 span {
  position: relative;
}

.sliding-middle-out h1 span:after,
.sliding-middle-out h1 span:before {
  content: '';
  display: block;
  margin: auto;
  width: 3px;
  transition: height 2s ease, background-color .5s ease;
  background: #B7D333;
  top: 0;
  bottom: 0;
  height: 0;
  position: absolute;
}
.sliding-middle-out h1 span:before {
  left: -5px;
}
.sliding-middle-out h1 span:after {
  right: -5px;
}
.sliding-middle-out:hover h1 span:after,
.sliding-middle-out:hover h1 span:before {
  height:50%;
}