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