最終更新日
contentは、要素の前後にコンテンツを挿入するためのプロパティです。HTML文書内に存在しない文字や画像などをスタイルシートだけで追加することができます。
contentは、before疑似要素または、after疑似要素とセットで使用します。つまり、文字や画像が追加される場所は、要素の直前または直後ということになります。
初期値 | 適用先 | 継承 |
---|---|---|
normal | すべての要素 | なし |
値 | 説明 |
---|---|
文字列 | 挿入する文字列を引用符で囲んで指定します。 |
URL | 挿入するファイルの場所を指定します。 |
カウンタ | 要素に連番をつけます。counter()関数、またはcounters()関数により呼び出された値が挿入されます。 |
attr() | カッコ内には属性名を指定します。適用対象の要素内の指定した属性の値を、contentの値として指定します。例えば、attr(alt)とすると、alt属性の値の文字列が挿入されます。 |
open-quote | quotesプロパティで指定されてる開始引用符を挿入します。 |
close-quote | quotesプロパティで指定されてる終了引用符を挿入します。 |
no-open-quote | 引用符は表示されませんが、quotesプロパティで指定されている引用符のネストが一段深くなります。 |
no-close-quote | 引用符は表示されませんが、quotesプロパティで指定されている引用符のネストが一段浅くなります。 |
normal | 適切な内容を生成します。(初期値) |
none | 内容を生成しません。 |
inhibit | 内容の生成を禁じます。 |
content: "new!"; content: url("new.png"); content: "第" counter(chapter) "章"; content: counter(chapter) "."; content: counters(chapter, ".") "."; content: attr(alt); content: open-quote; content: close-quote; content: no-open-quote; content: no-close-quote; content: normal; content: none; content: inhibit;