content
解説
要素の直前または直後に、文字や画像などを挿入することができます。content
プロパティを適用できるのは、:before
擬似要素および:after
擬似要素のみです。これらに適用することによって、例えば全ての画像の直後に「直リンク禁止」なんて文字を挿入することもできます。
文字列 | 挿入する文字を「"」または「'」で括って指定する |
---|---|
URI(URL) | URI(URL)で画像や音声等のファイルを指定する |
カウンタ | counter()関数、またはcounters()関数により呼び出した連番が、プロパティの値として指定される |
attr() | ()内には属性の名前を指定し、contentプロパティを適用する要素の該当属性で指定されている値が、contentプロパティの値として指定される |
open-quote | quotesプロパティで指定されている開始引用符が挿入される |
close-quote | quotesプロパティで指定されている終了引用符が挿入される |
no-open-quote | 引用符は表示されないが、quotesプロパティで指定されている引用符の入れ子の深さが一階層深くなる |
no-close-quote | 引用符は表示されないが、quotesプロパティで指定されている引用符の入れ子の深さが一階層浅くなる |
プロパティ情報
値: | 文字列,URI,カウンタ,attr() ,open-quote ,close-quote ,no-open-quote ,no-close-quote のいずれか |
---|---|
初期値: | "" |
適用対象: | :before 擬似要素と:after 擬似要素、display: marker である要素 |
継承: | しない |
パーセンテージ: | 不可 |
適用メディア: | 視覚 |
レベル: | 2 |
参照
使用例
ソース
CSSの記述方法はスタイルシートってなに?も参照下さい。 p.sample1:before {content: "SevenKey" } p.sample2:after {content: url("../img/smp.gif") }
HTMLの記述方法 <p class="sample1">Sample1</p> <p class="sample2">Sample2</p>
表示結果
Sample1
Sample2