セクションや段落の区切り線段落の区切りに使う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; he
