Go to information

content

contentプロパティは :before疑似要素、または :after疑似要素セレクタに加える要素の前後に仮想的に文字列や画像などの内容を生成します。(X)HTML文書自体を修正することなく、テキストや画像を自由自在に生成することができる便利な機能ですが、Windows版Internet Explorer 6, Windows版Internet Explorer 7、及び Macintosh版Internet Explorer 5 は生成内容関連プロパティに全く対応していません。

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

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

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

生成内容の中にエスケープ文字(¥A)を記述することで、br要素と同じ強制改行の働きをします(ただし、Safari では文字化けが起こります)。

contentプロパティの実装状況

Windows版Internet Explorer
×
Firefox
Opera
Safari
生成内容の文字列が ASCII文字以外は文字化けを起こす
カウンタ機能(counter-increment, counter-reset)と引用符の追加機能(quotes)は未実装
Macintosh版Internet Explorer 5
×

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 などで確認できるでしょう。

現在位置
  1. W3G
  2. CSS
  3. 生成内容
  4. content
ナビゲーション
ステータス情報
作者
上田 遼
公開
2007-02-02T16:09:35+09:00
更新
2008-12-29T04:30:37+09:00
URI
http://w3g.jp/css/generating_content/content
検索