CSS3：before、afterセレクタとcontent

beforeとafterセレクタは、その名の通り設定した要素の前後にスタイルを定義するセレクタです。

表示サンプルはこちら。
http://jsdo.it/goto_jp/iHdW

サンプルのHTML

<p class="gekiteki">＞なんということでしょう＜</p>

サンプルのCSS

.gekiteki:before {
    content:"ビフォー";
}
.gekiteki:after {
    content:"アフター";
}

「content」はbefore/afterセレクタの中のみで使えるプロパティで、テキストを挿入することができます。CSSで矢印を作る時も空っぽの指定をして実体を作る時に使います。

contentのテキストはドラッグ選択できないのでCSSが分かる人でなければコピペできないテキストを作ることもできますし、応用すると色々面白いことができるプロパティです。