今更聞けない:before :afterの使い方

CSS2.1で定義された疑似要素、:before,:after。
しかし以外に使い方を知らないって人が多いはず。

clearfixとかで色々お世話になっているはずのbefore,afterの使い方を改めてまとめて行ければと思います。

before,afterの生成される場所

selecter:before,selecter:afterの生成される場所はhtmlでかくとここ。

図で表すと、こんな感じ。

また、

などとCSSを書くと

という感じになります。
これを使ってclearfixは作られている訳ですね。

よくselecterの外側に要素ができると思われがちですが、(というか自分もそうでした・・・)、実際は内側にできるのです。なので、ちゃんとselecterのCSSも継承するし、背景にはselecterのものが表示されます。

before afterの使い道

結構活用方法などはありまして,

のように活用できます。

contentには画像、テキスト、要素の属性などを設定して表示することができます。
あとはblockquoteの引用元の表示など、結構いろんなことができてしまいます。要はアイデア次第!