Html 中线加垂直边界的水平线CSS技术

我试图将整个边框向上移动，使底部边框与文本的中间对齐。非常类似于，但我希望保留左右边界（它们也必须向上推）。原因是文本与上面的信息有关

我的JSFIDLE很近，但左/右边界不够高。所以我想要这样的东西：

|--------Info above is Important!--------|

---

（但左/右边框的底部不会漏过水平边框）

使用

:before

伪元素绘制水平线

h5{
宽度：100%；
文本对齐：居中；
左边框：1px实心#000；
右边框：1px实心#000；
利润率：10px 0 20px；
位置：相对位置；
}
h5:之前，h5:之后{
内容：''；
位置：绝对位置；
}
h5：之前{
最高：50%；
背景：#000；
高度：1px；
左：0；右：0；
}
h5：之后{
背景：#fff；
顶部：计算值（50%+1px）；
底部：0；
左：-1px；右：-1px；
}
跨度{
背景：#FFF；
填充：0 10px；
位置：相对位置；
z指数：1；
}

---

参考上面的信息

我想你想要这个：

h5{
位置：相对位置；
文本对齐：居中；
左边框：1px实心#000；
右边框：1px实心#000；
}
h5跨度{
背景：白色；
填充：0 15px；
位置：相对位置；
z指数：1；
}
h5：之前{
背景：黑色；
内容：“；
显示：块；
高度：1px；
位置：绝对位置；
最高：50%；
宽度：100%；
}
h5：之前{
左：0；
}

参考上述信息

h5跨度：之前，h5跨度：之后{
显示：内联块；
内容：“；
垂直对齐：底部对齐；
高度：.5em；
边框顶部：1px实心#000；
宽度：200px；
}

---

请参阅上面的信息

否我希望删除垂直线的下半部分。这很接近，谢谢！这很接近，但我希望删除示例中垂直线的下半部分。谢谢你的帮助！令人惊叹的谢谢