以下は、CSS2で定義された2つの疑似要素です。用途が似ているため、2つをまとめて解説します。

::before / ::after疑似要素 (CSS2)

要素αの前後にテキストや画像などを追加します。
α:before {
   content: 前に追加する内容;
   プロパティ: 値;
}
α:after {
   content: 後に追加する内容;
   プロパティ: 値;
}
:beforeと:afterの挿入位置(左側が正しい/右側は誤り)

:beforeと:afterの挿入位置(左側が正しい/右側は誤り)

:before疑似要素は、対象要素の前方に任意の文字列や画像などを追加できます。:after疑似要素は、対象要素の後方に任意の文字列や画像などを追加できます。追加位置は右図のように、『要素内の』先頭や末尾です。隣接する要素との間に追加されるわけではありません。


 
例えば、以下のようなHTMLがあるとき、
<p>引用部分の前後に引用符を追加:</p>
<blockquote>:before疑似要素は、対象要素の前方に任意の文字列や画像などを……</blockquote>
:before疑似要素と:after疑似要素を使ってCSSを以下のように記述すると、
blockquote:before {
   content: "『";
   font-size: 2em;
   color: red;
}
blockquote:after {
   content: "』";
   font-size: 2em;
   color: red;
}
:before、:after疑似要素の例

:before、:after疑似要素の例

blockquote要素の内容(引用内容)の前に「『」が追加され、後に「』」が追加されます。それらは、他の文字の2倍の大きさで、赤色に装飾されて表示されます。表示例は、右図の通りです。

このように、HTMLソースを編集せずに、任意の文字列を追加できます。

 
また、例えば、以下のようなリストを作るHTMLがあるとき、
<ul>
   <li>北海道</li>
   <li>東北地方</li>
   <li>関東地方</li>
   : : :
</ul>
:before疑似要素と:after疑似要素を使ってCSSを以下のように記述すると、
li:before { content: "※"; color: blue; }
li:after  { content: "!"; color: red;  }
:before、:after疑似要素の例2

:before、:after疑似要素の例2

リストの各項目の前に「※」記号が青色で付加され、各項目の後には「!」記号が赤色で付加されます。表示例は、右図の通りです。


 
先ほどのHTMLに対して、以下のように:after疑似要素を使ったCSSを記述すると、
li:after  { content: url("kaeru.png"); }
:after疑似要素で画像を加えた例

:after疑似要素で画像を加えた例

リストの各項目の後に、「kaeru.png」画像が付加されます。表示例は、右図の通りです。各項目の末尾に、かえるの画像が表示されています。

このように、URLを指定することで、任意の画像を付加することもできます。


 
さらに、例えば以下のように、リストを作るli要素にtitle属性が付加されたHTMLがあるとき、
<ul>
   <li title="ほっかいどう">北海道</li>
   <li title="とうほく">東北地方</li>
   <li title="かんとう">関東地方</li>
   : : :
</ul>
:before疑似要素と:after疑似要素を使って、以下のようにCSSを記述すると、
li:before {
   content: "地域名:";
   color: blue;
}
li:after  {
   content: "【" attr(title) "】";  /* title属性値を付加 */
   font-size: 80%;
   color: green;
}
属性値を付加することもできる

属性値を付加することもできる

リストの各項目の前に「地域名:」という文字列が青色で付加され、各項目の後には、li要素のtitle属性値に指定された文字列が、「【」と「】」に挟まれて、小さな緑色で付加されます。表示例は、右図の通りです。

このように、「attr( XXX )」という記述方法を使うことで、属性「XXX」に指定されている値を挿入することもできます。


 
最後に、その他の疑似要素の書き方について、ご紹介致します