ウェブランサー

content - 内容(コンテンツ)を挿入する

対応ブラウザ
IE7非対応IE8対応Firefox対応Chrome対応Opera対応Safari対応
適用対象 :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プロパティで挿入する引用符の表示方法を設定する