最終更新日 
contentプロパティ
contentは、要素の前後にコンテンツを挿入するためのプロパティです。HTML文書内に存在しない文字や画像などをスタイルシートだけで追加することができます。
contentは、before疑似要素または、after疑似要素とセットで使用します。つまり、文字や画像が追加される場所は、要素の直前または直後ということになります。
CSS3での変更点
特にありません
| 初期値 | 適用先 | 継承 |
|---|---|---|
| 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;
当サイトの活動をサポートしてみませんか？気軽にクリエイターの支援ができます。