content

解説

要素の直前または直後に、文字や画像などを挿入することができます。contentプロパティを適用できるのは、:before擬似要素および:after擬似要素のみです。これらに適用することによって、例えば全ての画像の直後に「直リンク禁止」なんて文字を挿入することもできます。

文字列挿入する文字を「"」または「'」で括って指定する
URI(URL)URI(URL)で画像や音声等のファイルを指定する
カウンタcounter()関数、またはcounters()関数により呼び出した連番が、プロパティの値として指定される
attr()()内には属性の名前を指定し、contentプロパティを適用する要素の該当属性で指定されている値が、contentプロパティの値として指定される
open-quotequotesプロパティで指定されている開始引用符が挿入される
close-quotequotesプロパティで指定されている終了引用符が挿入される
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