Igaloglog

つまり、こういう状況です。

上下にあるこの画像ラインがただのラインだったら、<p>要素にborder上下をつけるだけでいいんですが、あいにく上下にいるのは画像なんですよこれが。

例えば、上の画像ラインは<p>の背景画像で、下の画像ラインは<hr />、なんて方法でもいいんですが、デザインのためだけにHTMLに手を加えるのはできる限り避けたい。
HTMLは以下のようにごくシンプルであってほしいわけです。

HTML記述

<p>ここにはダミーテキストが入ればいいんですが、せっかくなのでIgarashiの好きな禅かなんかの言葉を入れてみることにします。<br />
水流元入海 月落不離天<br />
（みず ながれても とうみにいり つき おちて てんをはなれず）<br />
川の水はどこをどう流れても元の海に入るが、月は昇っても沈んでも変わらず天にある<br />
大体こんな意味ですな。<br />
禅のお坊さんはこれに仏性とかかけるのかも知れないですが、ストレートにそのまんま受け取ってもいいやないの。<br />
仏教に興味は薄いですが、仏教哲学はおもしろいと思います。</p>

余計なタグを追加せずに冒頭デザインを成立させるには、:after疑似要素を使用します。
詳細は続きを読むから。
ただし、注意していただきたいのが、IEボクチャンは:after非対応だってことです。（チャンチャラオカシイゼ）
IE？対応外だぜ。という超アニキ以外は、続きを読まないか、読んでも参考資料程度にすべきです。へえこういう方法もあるんだぁ的な。
もいっかい言っておきますが、IE非対応です。注意！
IEに対応したい場合はおとなしく<hr />を使いましょう。

まず、画像ラインを用意します。
これ↓。まぁ、仮に名前をline.gifとでもしときます。

そしてCSS

p {
	background: url(img/line.gif) no-repeat left top;
	margin-bottom: 8px;
	padding-top: 35px;
}
p:after {
	content: url(img/line.gif);
	display: block;
	padding-top: 10px;
}

このとき、margin、paddingなどは全てリセットされているとします。全要素リセットについては基本スタイル初期化―ユニバーサルセレクタ脱却―をどーぞ。

注意点としては、画像ラインは背景リピートができないので横幅が決まってないとできないということ。repeat-xでいきそうなもんですが、:after疑似要素のほうでリピートしてくれません。
そしてIEに対応してないということ。これ重要。致命的ですね。
まぁ、本当に参考っていうことでひとつ。仕事には使えませんね。