content 【内容を挿入する】
[Fx1] [Fx2] [Op6] [Op7] [Ns6] [Ns7]
contentプロパティは、要素の直前または直後に、文字や画像などの内容を挿入する際に使用します。contentプロパティを適用できるのは、:before擬似要素および:after擬似要素のみです。
文字列
挿入する文字列を『 " 』か『 ' 』で括って指定します。
URLでファイルを指定
直接URLでファイルを指定します。
attr(属性名)
マッチしたセレクタを対象に属性名で指定した属性の値を表示。()内には属性の名前を指定します。
カウンタ
マッチしたセレクタを対象に自動的にカウンターを追加します。counter()関数、またはcounters()関数により、カウンタ(連番)を呼び出した値が、contentプロパティの値として指定されます。
open-quote,close-quote
quotesプロパティで指定されている引用符が挿入されます。open-quoteを指定すると開始引用符、close-quoteを指定すると終了引用符が挿入されます。
no-open-quote,no-close-quote
quotesプロパティで指定されている引用符の入れ子の深さが一階層前後します。no-open-quoteを指定すると一階層深くなり、no-close-quoteを指定すると一階層浅くなります。
contentの使用例
CSSファイル
abbr:after {
content: "（" attr(title) "）" ;
color: #0033ff;
}
HTMLソース
<p>
スタイルシートの中でも<abbr title="Cascading Style Sheets">CSS</abbr>が一番普及している。
</p>
表示すると
スタイルシートの中でもCSSが一番普及している。
内容挿入・引用符関連項目
| content | 内容(コンテンツ)を挿入する |
| quotes | 引用符を設定する |
