本日は、デザインにおいて無限の可能性(大げさ？)を秘めた疑似要素 :before, :after を使ってみよう！の巻です。

疑似要素 :before, :after とは？

htmlに手を加えずに、要素の前(:before)と後ろ(:after)にフェイク(疑似)の要素を追加出来るというものです。
これを極めますと、画像を一切使用せず疑似要素だけで作られたアイコンなど、かなり凄い事が出来るようです。

今回はbodyタグに:before, :afterの擬似要素を使い、ヘッダーとフッター部分に色をのせて境界線を作ってみます。
このサイトのヘッダーとフッター部分の薄いグレーの色の部分です。
ちなみにヘッダー部分を:before、フッター部分を:afterで指定しています。

ソースをご覧下さい。

ヘッダー、フッター共通部分はまとめて記述します。
改めて、フッター部分をmarginの数値を変えて位置調整しています。

content: ” “;　→　” “の中が空のcontentプロパティですが、
擬似要素を使用する場合、contentプロパティは必ずセットで記述するのがルールです。
記述が無いと動作しませんので、空でも必ず記述して下さい。
他に、

• content: ” “;の” “の中にテキストを入れれば、テキストが表示される。
• 画像を表示させたい時は content:url(“画像のURL”)
• content: open-quote;開始引用符 , content: close-quote; 終了引用符でエレメントの前後に引用符を付ける。

などもあります。

:before, :afterで作るエレメントはインライン要素ですので、高さや幅を指定したい場合は　display: block;　でブロック要素にします。

margin-top: と margin-bottom: でヘッダー、フッターそれぞれの範囲に色が載るよう、調整します。その際、firebugでバランスを見ながら数値を決めるとと簡単です。

いかがでしょうか？
これならすぐにでも取り入れられそうです。

他にも面白い使い方があれば、ぜひ投稿して下さい！