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