CSSの「疑似要素」の書き方 再入門（CSS3対応版）(3ページ目)

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

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

要素αの前後にテキストや画像などを追加します。

α:before {
   content: 前に追加する内容;
   プロパティ: 値;
}

α:after {
   content: 後に追加する内容;
   プロパティ: 値;
}

: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;
}

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;  }

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

先ほどのHTMLに対して、以下のように:after疑似要素を使ったCSSを記述すると、

li:after  { content: url("kaeru.png"); }

リストの各項目の後に、「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」に指定されている値を挿入することもできます。

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