要素内容の挿入法と置換法。
| 名前 | content |
|---|---|
| 値 | normal | none | [<content-replacement> | <content-list>] [ / [<string> | <counter>]+ ]?
|
| 初期値 | normal |
| 適用対象 | すべての要素／ツリーに留まる疑似要素／ページ マージン ボックス |
| 継承 | されない |
| 百分率 | 受容しない |
| 算出値 | 下の注釈文を見よ |
| 正準的順序 | 文法に従う |
| アニメーション型 | 離散的 |
ユーザー エージェントには、視覚的でないものも含め、どの媒体でもこのプロパティをサポートすることが期待される。
content プロパティは、要素や疑似要素の内側に何が描画されるかを規定する：
normal ⤴
［要素／ページ マージン ボックス］に対しては、これは contents に算出される。
［::before／::after］疑似要素に対しては、これは none に算出される。
::marker 疑似要素に対しては、これは それ自身（normal）に算出される。
以下のCSSが組み込んであります：
.Test_normal{
content:normal;
color:red;
}
開始<SPAN class=Test_normal>テスト</SPAN>終了
none ⤴
要素に対しては、要素の子内容が要素の子として描画されるのを ― 要素は空であったかのように ― 妨げる。
疑似要素に対しては、display が none にされていたかのように疑似要素の作成を妨げる。
いずれにせよ、この値は、［要素／疑似要素］を出自の要素とする別の疑似要素を生成させなくすることはない。
以下のCSSが組み込んであります：
.Test_none{
content:none;
color:red;
}
.Test_none_b::before{
content:none;
color:red;
}
開始<SPAN class=Test_none>テスト</SPAN>終了
開始<SPAN class=Test_none_b>テスト</SPAN>終了
/ [<string> | <counter>]+ ]? ⤴
構文は <image> に等しい。
［要素／疑似要素］を指定された <image> で埋められる置換要素にする。通常の内容は、抑止され、display が none にされていたかのようにボックスを生成しない。
<image> は無効な画像を表現する場合、代わりに［生来な横幅、生来な縦幅］どちらも 0 の画像を表現しているものと扱って、透明な黒で埋めるものとする。
¶課題省く
以下のCSSが組み込んであります：
.Test_Siki3_u{
content:url(../Sample/Picture_S.jpg);
}
.Test_Siki3_u_b::before{
content:url(../Sample/Picture_S.jpg);
}
開始<SPAN class=Test_Siki3_u>テスト</SPAN>終了
開始<SPAN class=Test_Siki3_u_b>テスト</SPAN>終了
要素の内容を［指定された 1 個以上の各値に対応する、指定された順序による匿名行内ボックスたち］に置換する。通常の内容は、display が none にされていたかのように抑止され、ボックスを生成しなくなる。
各値は、行内レベルの匿名ボックスを要素の内容に供与する。これは、<image> に対しては置換要素になり、他に対してはテキスト連なりになる。
この仕様は、［ユーザー エージェントは、どちらのふるまいを利用するものとするか］は、意図的に定義しないが、ユーザー エージェントは、一貫して片方のみを利用するものとする。
以下のCSSが組み込んであります：
.Test_Siki3_s{
content:"文字列";
color:red;
}
.Test_Siki3_s_b::beffore{
content:"文字列";
color:red;
}
開始<SPAN class=Test_Siki3_s></SPAN>終了
開始<SPAN class=Test_Siki3_s>テスト</SPAN>終了
開始<SPAN class=Test_Siki3_s_b>テスト</SPAN>終了
contents ⤴
すでに利用されている場合は、何も表現しない（none の様に）。実際に生成される疑似要素のみ検査される。
以下のCSSが組み込んであります：
.Test_Siki3_contents{
content:contents;
color:red;
}
.Test_Siki3_contents_b::beffore{
content:contents;
color:red;
}
開始<SPAN class=Test_Siki3_contents>テスト</SPAN>終了
開始<SPAN class=Test_Siki3_contents_b>テスト</SPAN>終了
<image> 値が無効な画像を表現する場合、何も表現しない（“飛ばされた”かのように、行内内容は要素に追加されない）。
<image> は無効な画像を表現する場合、ユーザー エージェントは次のいずれかを行うものとする：
¶課題省く
以下のCSSが組み込んであります：
.Test_Siki3_image{
content:url(../Sample/Picture.jpg) url(../Sample/Picture_2x.jpg);
}
.Test_Siki3_image_b::before{
content:url(../Sample/Picture.jpg) url(../Sample/Picture_2x.jpg);
}
開始<SPAN class=Test_Siki3_image>テスト</SPAN>終了
開始<SPAN class=Test_Siki3_image_b>テスト</SPAN>終了
以下のCSSが組み込んであります：
.Test_Siki3_counter{
content:counter(Test_Cunt);
counter-increment:Test_Cunt;
color:red;
}
.Test_Siki3_counter_b::before{
content:counter(Test_Cunt);
color:red;
}
開始<SPAN class=Test_Siki3_counter>テスト</SPAN>終了
開始<SPAN class=Test_Siki3_counter>テスト</SPAN>終了<BR> 開始<SPAN class=Test_Siki3_counter_b>テスト</SPAN>終了<BR> 開始<SPAN class=Test_Siki3_counter>テスト</SPAN>終了<BR> 開始<SPAN class=Test_Siki3_counter_b>テスト</SPAN>終了<BR> 開始<SPAN class=Test_Siki3_counter>テスト</SPAN>終了<BR>
open-quote、close-quote ⤴
以下のCSSが組み込んであります：
.Test_Siki3_quote{
content:open-quote;
color:red;
}
.Test_Siki3_quote_b::before{
content:open-quote;
color:red;
}
.Test_Siki3_quoten_b::before{
content:no-open-quote;
color:red;
}
開始<SPAN class=Test_Siki3_quote>テスト</SPAN>終了
開始<SPAN class=Test_Siki3_quote_b>テスト</SPAN>終了<BR> 開始<SPAN class=Test_Siki3_quote_b lang=en>テスト</SPAN>終了<BR>
no-open-quote、no-close-quote ⤴
開始<Q style="quotes:'〈' '〉' '｛' '｝';">テ<Q>ス</Q>ト</Q><BR> 開始<Q>テスト<Q>てすと</Q></Q>終了<BR> 開始<Q class=Test_Siki3_quoten_b>テスト</Q>終了<BR>
テスト
テスト終了てすと
テスト終了
/ [<string> | <counter>]+ ]? ⤴
以下のCSSが組み込んであります：
.Test_Siki3_20{
content:/"代替テキスト";
color:red;
}
.Test_Siki3_2{
content:url(○○.jpg)/"代替テキスト";
color:red;
}
.Test_Siki3_2_b::before{
content:url(○○.jpg)/"代替テキスト";
color:red;
}
開始<SPAN class=Test_Siki3_20></SPAN>終了<BR>
開始<SPAN class=Test_Siki3_20>テスト</SPAN>終了<BR>
開始<SPAN class=Test_Siki3_2>テスト</SPAN>終了<BR>
開始<SPAN class=Test_Siki3_2_b>テスト</SPAN>終了<BR>
¶課題など省く
引用符は、文書内の適切な箇所に content プロパティの［open-quote／close-quote］値を通して挿入される。各［open-quote／close-quote］の出現は、入れ子深さに基づいて、quotes プロパティに指定された いずれかの文字列に置換される。
［open-quote、close-quote］は、順に、引用符ペアを成す［1 個目、2 個目］の文字列を指す。どの引用符ペアが利用されるかは、引用符の入れ子レベル ― すなわち、現在の出現より前に生成されたテキストにおける、open-quote の出現数から close-quote の出現数を引いた結果 N ― に依存し、深さ N に応じて ( N ＋ 1 ) 個目のペアが利用される。深さがペアの総数を超える場合、最後のペアが繰り返される。
/* 2 つの言語における 2 つのレベル用に， 2 つの引用符ペアを指定する。 */
:lang(en) > q { quotes: '"' '"' "'" "'" }
:lang(no) > q { quotes: "«" "»" "’" "’" }
/* q 要素の内容の前, 後に引用符を挿入する */
q::before { content: open-quote }
q::after { content: close-quote }
| 表示内容： |
| 表示内容： |