:beforeと:afterは疑似セレクタ要素の1つで、「要素の先頭もしくは後ろに、画像や文字を表示」することができます。
例えば、<p>に:beforeを使用すると、すべての<p>の先頭に任意の文字列や画像などを表示させることができます。
:afterを使えば、後ろに表示できます。
なお、追加する文字列などはcontentプロパティで指定することができます。
例えば、以下のような文書があるとします。
<p>さきちん絵はがきで配布しているデータは、すべて無料です。どんなにダウンロードしてもOK！<br>
細かな規約も設けていないので、気軽にご利用いただけます♪</p>
この文書の先頭に「さきちん絵はがきについて」といった文字を表示する場合は、セレクタに:before、contentプロパティに文字列を入力します。
後ろに表示する場合はセレクタに:after、contentプロパティに文字列を入力します。
具体的な使用例
例として、さきほどの文書に「さきちん絵はがきについて」の文字を先頭に表示させてみます。
[CSSの記述例]content:"さきちん絵はがきについて";
color:#F00; ← 赤色
font-weight:bold; ← 太文字
}
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>:beforeと:afterの利用</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<p>さきちん絵はがきで配布しているデータは、すべて無料です。どんなにダウンロードしてもOK！<br>
細かな規約も設けていないので、気軽にご利用いただけます♪</p>
</body>
</html>
ブラウザで確認すると、以下のように表示されます。
このように:beforeを使えば、要素の先頭に文字や画像を表示することができます。
要素の後ろに表示させる
:afterを使えば要素の後ろに文字や画像を表示することができます。
[CSSの記述例]content:"さきちん絵はがきについて";
color:#F00; ← 赤色
font-weight:bold; ← 太文字
}
これら:beforeや:afterをうまく使えば、まとめて画像や文字を表示させることができるので非常に便利です。
対応ブラウザについて
contentに対応しているブラウザは限られており、古いブラウザではうまく表示することができません。
例えば、IEの場合は表示できるのが8以降となります。それより古いバージョンでは対応していないので、:beforeや:afterを使う際には気をつけましょう。
覚えておきたいポイント
古いブラウザに注意
:beforeと:afterをうまく使えば、ページ内の任意の要素に一括で画像や文字を表示させることも可能です。
しかし、IE8以下などの古いブラウザはcontentプロパティに対応していません。使い所に注意しましょう。
