content - 内容（コンテンツ）を挿入する
- 対応ブラウザ
-
| 適用対象 | :before疑似要素、:after疑似要素 |
| 継承 | しない |
contentプロパティは、要素の直前または直後に、文字や画像などの内容を挿入する際に使用します。contentプロパティを適用できるのは、[:before]擬似要素および[:after]擬似要素のみです。
contentに与えられる値
- content: "文字列";
- 挿入する文字列を『 "〜" 』か『 '〜' 』で括って指定します。
- content: URL;
- 直接URLでファイルを指定します。
- content: attr(属性名);
- マッチしたセレクタを対象に属性名で指定した属性の値を表示。()内には属性の名前を指定します。
- content: カウンタ;
- マッチしたセレクタを対象に自動的にカウンターを追加します。counter()関数、またはcounters()関数により、カウンタ(連番)を呼び出した値が、contentプロパティの値として指定されます。
- content: open-quote, close-quote;
- quotesプロパティで指定されている引用符が挿入されます。open-quoteを指定すると開始引用符、close-quoteを指定すると終了引用符が挿入されます。
- content: no-open-quote, no-close-quote;
- quotesプロパティで指定されている引用符の入れ子の深さが一階層前後します。no-open-quoteを指定すると一階層深くなり、no-close-quoteを指定すると一階層浅くなります。
contentの使用サンプル
CSS
.content_abbr:after {
color: #0066FF;
content:'('attr(title)')';
}
XHTML
<p> スタイルシートの中でも<abbr title="Cascading Style Sheets" class="content_abbr">CSS</abbr>が一番普及している。 </p>
表示確認
スタイルシートの中でもCSSが一番普及している。
contentに関連するCSSプロパティ
| 内容の挿入・置換 | |
|---|---|
| content | 内容（コンテンツ）を挿入する |
| counter-increment | contentで挿入されたカウンタの値を進める |
| counter-reset | contentで挿入されたカウンタの値をリセットする |
| crop | 置換要素の表示範囲を指定する |
| page-policy | ページごとの章や節、セクション等の番号のカウント方法や名前の割り当て方を指定する |
| quotes | contentプロパティで挿入する引用符の表示方法を設定する |