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

質問

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

回答No.2

otaku37564 · ベストアンサー

画像を使っていいなら

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

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

回答No.3

metametamu

<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

とりあえずパッと思いついたのは<s>タグ（取り消し線）です。
　　あいうえお<s>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</s><br>
空白（&nbsp;）をたくさん書かないといけませんし、画面の横幅に合わせて…もできなくてスマートじゃありませんが。