段落の区切りに使うhr要素をちょっと凝ったデザインにするという話は以前書きました。似たような話はCSS-Tricksでも最近取り上げられていますね。しかしこれらはhr要素でのテクニックです。では、例えばsection要素の最後にこういったちょっと凝った感じの区切り線をつけるにはどうすれば良いのでしょうか？
結論としては::beforeと::after擬似要素を組み合わせて頑張るということになります。例えば上記CSS-Tricksのサンプルの最後の例やCekerholicなどで見られるセクション記号(§)の左右に罫線がつくようなデザインを作ってみます。
Demo: Section/Paragraph Divider
hr要素の場合は結構簡単なものです。
hr {
border: none;
border-top: 1px dotted #666;
position: relative;
height: 0;
}
hr::before {
margin-left: -32px;
position: absolute;
top: -24px;
left: 50%;
width: 64px;
height: 48px;
line-height: 48px;
content: "\00a7";
color: #999;
background-color: #fff;
font-family: "Georgia", serif;
font-style: italic;
font-size: 48px;
text-align: center;
}このようにまずhr要素を罫線のみにし(ここでは点線にしました)、::before擬似要素でセクション記号を挟むということです。セクション記号の位置揃えはrelativeした中でのabsoluteでやります。上にフォントサイズの半分ずらし、左には50%分移動させ、更にmargin-leftで余白を含めた幅の半分戻すことによって中央揃えします。幅に余裕を持たせて背景をコンテンツの背景と合わせることによって、罫線とセクション記号の間に少し余白をとったりもすると良いでしょう。色は好みですが、コントラストが強いと主張がすごいので控えめにするとすっきりすると思います。border-bottomやtext-shadowプロパティーを駆使することによって、このエントリの最初に載せた画像のような少し凹んだデザインも可能です。
section要素の最後につける場合は少し工夫が必要です。区切り線を置くためにパディングを確保したり、罫線を横幅いっぱいにしないようにするために複数の擬似要素を使ったりですね。コードの多くはhr要素へのスタイルと変わらない部分も多いので、違う部分のみ抜粋します。
section {
padding-bottom: 96px;
position: relative;
}
section::before {
border-top: 1px dotted #666;
position: absolute;
bottom: 0;
left: 25%;
width: 50%;
height: 48px;
line-height: 48px;
content: "";
}
section::after {
bottom: 24px;
}section要素ではこの区切り線を配置するためのスペースをpadding-bottomを使って確保します。確保するサイズは要調整ですが、だいたい::before擬似要素の高さの1.5～2倍が適当そうです。そして::before擬似要素で罫線を作ります。これの高さは好みで、周囲のコンテンツと余裕を持たせたいなら大きめにするという感じです。幅で区切り線のサイズを決めますが、あまり考えずにleftでセンタリングされるようにするにはそれぞれ%を使って指定するのが良いでしょう。px単位で幅を決めたい場合は、手作業で調節するかleft: 50%からmargin-leftで半分戻すというテクニックを使えば大丈夫だと思います。最後のセクション記号の配置に使う::after擬似要素のコードはhr要素でのコードとほぼ同じです。違うのはtopの代わりにbottomを使ってsection要素の下端を基準に配置している点のみです。
セクショニング要素に対して擬似要素をこういう形でフルに使ってしまうと、それらに対して使うことが多い(私見ですが)clearfixがうまく機能しなくなってしまうことがあるので、実際に利用する時にはそこそこ注意が必要です。こういったデメリットと画像と追加マークアップが不要というメリットを比較して、後者のメリットが上回ると感じるなら一考の価値はありそうです。早い所、::after::afterとか::before(2)とかできるようになると良いですね！