css - 在透明背景上的标题后面画线

Question

我想在标题的左侧和右侧画一条线，如下所示：

通常我会通过为周围元素添加一个边框顶部和标题的以下样式来做到这一点。

h2
{
   margin-top:-10px;
   padding: 0 5px;
   background:white;
}

但在这种情况下，我不能这样做，因为周围元素的背景是透明的，正如你在这个小提琴中看到的：http: //jsfiddle.net/tUmZY/2/

我现在正在玩这个，但我不知道如何实现这一点。只要效果是理想的，我将不胜感激任何解决方案。

Answer 1

您是否正在寻找这样的东西：

CSS：

h2:before, h1:after {
    content: '';
    position: absolute;
    border-top: 1px solid white;
    width: 100%;
    top: 50%;
}
h2:before {
    right: 100%;
}
h2:after {
    left: 100%;
}