文字列の後に中央線を引きたいのですが

文字列の後に中央線を引きたいのですが
この添付した画像は文字列＋　-　記号をいっぱい記述したものです
<HR>タグやスタイルシートのborder-＊＊＊-style:等で解決するのか
と思っていたのですが甘かったです。
どなたか文字＋中央線を記述出来る方教えてください。点線ではなく
一直線で　なるべく画像を使わない方法でお願いします。
もし画像を使うとしたら用意する画像サイズとかも教えてください。
詳しくなくてすみません。

No.2 ベストアンサー 回答者： otaku37564 回答日時： 2010/09/01 11:22

画像を使っていいなら

高さ１５PX　幅２PXの画像の中心に２PXの横線を描く。
GIFで1Kb以下

それをCSSのボックスやテーブルに入れて
X軸に引き伸ばし

No.3 回答者： metametamu 回答日時： 2010/09/01 11:53

<style type="text/css">

div{
margin-top:0.5em;
padding-bottom:0.5em;
border-top:1px solid #000;
}
p{
margin:-0.5em 0 0;
float:left;
background:#fff;
}
</style>



<div>
<p>受付情報</p>
</div>

floatとネガティブマージンを組み合わせて親要素にかぶせてみました。

No.1 回答者： g_liar 回答日時： 2010/09/01 10:53

とりあえずパッと思いついたのは<s>タグ（取り消し線）です。

　　あいうえお<s></s><br>
空白（）をたくさん書かないといけませんし、画面の横幅に合わせて…もできなくてスマートじゃありませんが。