[解決済み] 横線の真ん中に文字がある場合のCSSテクニック

質問

真ん中に文字が入った横長の罫線を作りたいのですが、どうすればいいですか？ 例えば

-------------------------------------- ここに私のタイトル ------------------------------

CSSでそれを行う方法はありますか？もちろん、すべての"-"ダッシュはありません。

どのように解決するのですか？

大まかなやり方はこうです。 border-bottom を含む h2 を指定すると h2 より小さい line-height . このテキストは、ネストされた span 背景は非透過です。

h2 {
   width: 100%; 
   text-align: center; 
   border-bottom: 1px solid #000; 
   line-height: 0.1em;
   margin: 10px 0 20px; 
} 

h2 span { 
    background:#fff; 
    padding:0 10px; 
}

<h2><span>THIS IS A TEST</span></h2>
<p>this is some content other</p>

Chromeのみでテストしましたが、他のブラウザーでも動かないことはありません。

JSFiddleです。 http://jsfiddle.net/7jGHS/