セレクタ内の文字の最初と最後に働くスタイルシート（CSS）

セレクタ:before { content:文字など ; プロパティ:値 ; …}
セレクタ:after { content:文字など ; プロパティ:値 ; …}

解説

セレクタの最初と最後に文字や記号を追加して表示するスタイルシートの書き方です。

例えば、見出しに章番号を付けたり、項目の前に記号を付けたりすることが出来ます。

なお、CSSのセレクタの後に書く「:before/after」は擬似要素の一種です。

書き方は、スタイルシートを適用したいセレクタ名の後に「:beforeもしくは:after」を書きます。

「:before」は対象のセレクタの冒頭に文字や記号を追加して表示し、一方「:after」は文末に追加することを指定する擬似要素です。

なお、この書き方はInternetExplorer5.0/5.5/6.0/7.0には対応していません。

contentプロパティで追加文字を設定

『CSSの書き方』にあるように、これらの擬似要素によってセレクタに追加する文字は「content：文字列など」で指定します。

例えば、★を追加したいのであれば、「content:”★”」、画像を追加したいのであれば、「content:url(ファイルのURI)」のようにそのurlを指定します。