この記事は最終更新日から2年以上が経過しており、情報が古くなっている可能性があります。

擬似要素は疑似クラスと比較してあまり頻繁には使用しませんが、使いこなすと便利なのでメモっておきます。

::before
要素の前
::after
要素の後
::first-line
ブロック要素の最初の行
::first-letter
ブロック要素の最後の行

以下、疑似要素の主な使い道。

clearfix
.clearfix::after {
content: "";
clear: both;
display: block;
}
マーカーやアイコン
マーカーは::afterで見出しなどを指定する。
アイコンはPURE CSS GUI ICONSとかをなんかする。
ダミーテキスト
<style rel="stylesheet" type="text/css">
.dummy_text:before {
content:"これはダミーです。";
}
</style>
<p class="dummy_text"> </p>