content

Updated / Published

contentプロパティは :before擬似要素、または :after擬似要素をセレクタに加える要素の前後に仮想的に文字列や画像などの内容を生成します。

スクリーンリーダーや音声ブラウザなどの音声出力環境のソフトウェアの多くは、contentプロパティで生成された内容を読み上げます。

値
初期値
空文字
適用対象
:before擬似要素、または :after擬似要素をセレクタに加える要素
継承
しない
メディア
all

contentプロパティの値

contentプロパティに指定できる値はそれぞれ以下の意味を示します。

<文字列>
マッチしたセレクタを対象に追加する文字列を指定
文字列はダブルクォーテーション（"）、もしくはシングルクォーテーション（'）の引用符で括ります。
<URI>
マッチしたセレクタを対象に追加する画像等の URI を指定
attr(X)
マッチしたセレクタを対象に X（属性名）で指定した属性の値を表示
abbr:after,acronym:after { content : "（" attr(title) "）" ; } のような形で、X の部分には良く title属性が用いられます。
<カウンタ>
マッチしたセレクタを対象に自動的にカウンタ（counter-incrementプロパティと counter-resetプロパティ参照）を追加
  • counter(カウンタ名)
  • counter(カウンタ名,スタイル)
  • counters(カウンタ名,"区切り文字")
  • counters(カウンタ名,"区切り文字",スタイル)
カウンタスタイルには <list-style-type> が入ります。スタイルの初期値は "decimal" です。
open-quote
quotesプロパティで設定された要素の先頭に引用符を追加
close-quote
quotesプロパティで設定された要素の最後に引用符を追加
no-open-quote
quotesプロパティで設定された要素の階層（引用レベル）を一段階深くする
no-close-quote
quotesプロパティで設定された要素の階層（引用レベル）を一段階浅くする

なお、生成内容の中にエスケープ文字（\A）を記述することで、br要素と同じ強制改行の働きをします。

contentプロパティの実装状況

Internet Explorerにおける生成内容関連プロパティのサポートはIE8からになります。

IE
◯：IE8よりサポート、IE6, 7は未サポート
Firefox
◯
Opera
◯
Chrome
◯
Safari
◯
iOS
◯
Android
◯

CSSファイル内に非ASCII文字列を含む場合

CSSファイル内の文字列にASCII文字列以外を含む場合は文字化けを起こすことがあります。それには、UAが文字エンコーディングを決定するのに次の手順で試しているのですが、1つでも結果が得られると止めてしまい、その際に間違った文字エンコーディングで解釈してしまうことがあるためです。

  1. <meta http-equiv="Content-Type" content="text/html; charset=xxx" />またはHTML5の場合は<meta charset="xxx" />のcharset属性の値、ただしHTTPレスポンスヘッダでCSSファイル用に文字エンコーディングを設定している場合はHTTPレスポンスヘッダで得られた値
  2. CSSファイルの始めにある文字のUnicodeのバイト順の値
  3. @charsetルールで指定された値
  4. link要素のcharset属性で指定された値（ただし、HTML5ではlink要素のcharset属性は廃止されたため、この方法は使うべきではありません）。
  5. ここまで試して結果が得られなかった場合は、最終的にUAは文字コードがUTF-8であると仮定する

このためUAが文字エンコーディングを誤って文字化けを起こさないように、@charsetルールで文字コードを必ず指定すること、あわせて非ASCII文字列を用いる際には16進表記のUnicodeへエスケープして使うことをおすすめします。16進表記のUnicodeとは、「←」「→」の矢印記号の生成を行う場合は、content:"←";, content:"→"; と記述するのではなく、content:"\2190";, content:"\2192"; と記述します。

サンプル

abbr:after { content : "（" attr(title) "）" ;  color : #666 ; }
......
<p>ウェブページを記述する際に一般的に用いられるマークアップ言語に
<abbr title="HyperText Markup Language">HTML</abbr>がある。
</p>

ここでは、abbr要素の title属性の値を抜き出して、要素の後にそれを生成しています。