Html 如何在文本元素之间添加水平线

我试图在两个文本元素之间添加一行，如下面HTML中的图片，但我不能。我只能在培训计划和下一行中的其他文本之间添加一行

h3{ 位置：相对位置； } h3跨度{ 背景色：白色； 右边填充：10px； } h3：之前{ 内容：； 位置：绝对位置； 底部：0； 左：0； 右：0； 高度：0.5em； 宽度：60%； 边框顶部：1件纯黑； z指数：-1； } 培训计划

---

阅读更多内容您可以使用hr标记在html文本之间放置水平行。

您可以使用flexbox实现这一点，只需多玩一点

但这里有一个简短的片段：

.flex{ 显示器：flex； 对齐项目：居中； } h3{ 字体系列：蒙特塞拉特； } .线路{ 身高：0； 利润率：0.10px； 边框顶部：1件纯黑； 宽度：40%； } 培训计划 阅读更多

---

您可以使用flexbox轻松完成此操作

h3{ 字体系列：蒙特塞拉特 } .flex父项{display:flex；} .线路部{ flex:1；/*flex增长*/ 填充：0 5px； } .电话线{ 身高：50%； 边框底部：1px实心bbb； } 培训计划 阅读更多

---

有多种方法可以实现此效果，但其中一种方法是将两个元素包含在中，然后在中应用底部边框

然后，当您使用垂直平移变换：translateY将标题推到低于正常显示的位置时，边框底部现在将显示为在两个标题之间运行，而不是在标题下方运行

工作示例：

.标题组{ 显示：流根； 边框底部：1px实心rgb191、191、191； } .标题{ 填充：0 6px； 背景色：rgb255、255、255； 转换：translateY27px； } .培训{ 浮动：左； } .阅读更多{ 浮动：对； } 培训计划 阅读更多

---

我同意flexbox是一个很好的方法。但是，为什么要使用这样的实际元素呢？一个或多个伪元素不是更好的选择吗？