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

Question

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

通常情况下，我会通过在周围元素上添加border-top以及标题的以下样式来实现此目的。

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%;
}