最終更新日

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;
参考文献:CSS3 Generated and Replaced Content Module外部リンク
HOME