区切り線である <hr> タグですが、デフォルトのままですと、グレーのちょっと味気ない罫線になってしまいますが、もうちょっとデザイン性が欲しいな、と思うこともしばしばです。
そこで、この <hr> タグを <div> タグでくくってあげるだけで、結構いろんな工夫ができるようになります。
考え方はこのような感じです。
hr を div でくくり、 hr を display:none; を使って非表示にすることで、 div に対して飾りつけをしていく、というものになります。
HTMLでの記述は
---------------------------------------------
<div class="line"><hr /></div>
---------------------------------------------
class指定で ｌｉｎｅ と設定しました。
CSSで、hrを非表示にし、divにスタイルを設定しましょう。
---------------------------------------------
hr {
display: none;
}
div.line {
border-bottom: solid 1px #FF6600;
}
---------------------------------------------
div に対して、下線を実線に設定しました。
このように表示されます。
設定したのは下線のみなので、1本の罫線が引かれているように見えますね。
実線（solid）だけでなく、点線（dotted や dashed）なんかを使ってみても面白いです。
適宜、margin や padding を用いて、余白調整なども可能ですし、div の背景に画像を設定すれば、<hr>タグを使用している、という印象はもはやなくなるかと思います。
万が一、cssが適用されない環境においても、<hr>タグが存在しているので、区切り線をつけてくれます。
文章が長く続いてしまうと、どうしても疲れてしまうものです。
目のお休みどころに、<hr>タグを使ってみるのもいかがでしょうか。