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