contentプロパティは :before疑似要素、または :after疑似要素をセレクタに加える要素の前後に仮想的に文字列や画像などの内容を生成します。(X)HTML文書自体を修正することなく、テキストや画像を自由自在に生成することができる便利な機能ですが、Windows版Internet Explorer 6, Windows版Internet Explorer 7、及び Macintosh版Internet Explorer 5 は生成内容関連プロパティに全く対応していません。
:before疑似要素、または :after疑似要素をセレクタに加える要素contentプロパティに指定できる値はそれぞれ以下の意味を示します。
")、もしくはシングルクォーテーション(')の引用符で括ります。<URI>attr(X)abbr:after,acronym:after { content : "(" attr(title) ")" ; } のような形で、X の部分には良く title属性が用いられます。counter-incrementプロパティと counter-resetプロパティ参照)を追加counter(カウンタ名)counter(カウンタ名,スタイル)counters(カウンタ名,"区切り文字")counters(カウンタ名,"区切り文字",スタイル)list-style-type> が入ります。スタイルの初期値は "decimal" です。open-quotequotesプロパティで設定された要素の先頭に引用符を追加close-quotequotesプロパティで設定された要素の最後に引用符を追加no-open-quotequotesプロパティで設定された要素の階層(引用レベル)を一段階深くするno-close-quotequotesプロパティで設定された要素の階層(引用レベル)を一段階浅くする生成内容の中にエスケープ文字(¥A)を記述することで、br要素と同じ強制改行の働きをします(ただし、Safari では文字化けが起こります)。
counter-increment, counter-reset)と引用符の追加機能(quotes)は未実装Safari では生成内容の文字列が ASCII文字列以外では文字化けを起こすため、Unicode を使うことをお奨めします。たとえば、「←」「→」の矢印記号の生成を行う場合は、content:"←";, content:"→"; と記述するのではなく、それぞれ Unicode で content:"\2190";, content:"\2192"; と記述します。また、Safari は引用符の追加機能(quotesプロパティ)に対応していないのですが、デフォルトで q要素のみ、その内容の先頭と最後の部分にダブルクォーテーション(")を生成する設定になっています。
a[href]:before {content: url(arrow.gif);}
abbr:after { content : "(" attr(title) ")" ; color : #666 ; }
......
<p>ウェブページを記述する際に一般的に用いられるマークアップ言語に
<abbr title="HyperText Markup Language">HTML</abbr>がある。
</p>
ここでは、abbr要素の title属性の値を抜き出して、要素の後にそれを生成しています。生成内容に対応している Netscape, Firefox, Opera, Safari などで確認できるでしょう。