目次を飛ばして本文へ パン屑リストへ
Powered by Google

content

対応状況
N7.0
Win
N6.0
Win
e6.0
Win
e5.5
Win
e5.0
Win
e5.0
Mac
e4.5
Mac
O7.0
Win
O6.0
Win
× × × × ×
<文字列> | <URL> | <カウンタ> | attr(X) | open-quote | close-quote | no-open-quote | no-close-quote ]+ inherit
初期値 空文字列
適用 ':before',':after'
継承 しない
レベル 2-
メディア all

':before'疑似要素 と ':after'疑似要素 に指定します。

例えば、注釈としての p要素 に、直前に「注) 」と付くようにしするには、以下のように指定します。
p.note:before { content: "注) " }

こうやって'content'で作った、ソースに無い付け足された内容を、生成内容と呼びます。この生成内容は、主体の一部として扱われます。例えば、こうすると、
p.note:before { content: "注) " }
p.note        { border: solid green }

"注) "の部分も、緑色の枠線で囲まれます。プロパティの指定は、継承出来るものをすべて継承します。

キーワード解説
<文字列>
テキストの内容を生成します。上の例を参照。
<URL>
文書外リソースを指し示すURLを値に採ります。以下を参照。
<カウンタ>
カウンタは2種類の[counters()]を通して指定する事が出来ます。詳細はカウンタを参照。
open-quoteとclose-quote
これらの値は'quotes'で与えられる適当な文字列に置き換えられます。
no-open-quoteとno-close-quote
何も挿入しませんが、引用レベルは増加(又は減少)します。
attr(X)
この関数は、セレクタの主体が持つ属性Xの値を文字列として返します。主体が指定された属性を持っていない場合は何も挿入しません(つまり空文字列を返します)。

上記キーワードを、空白類で区切って列挙します。

@media aural {
   blockquote:after { content: url("beautiful-music.wav") }
}

上の例では、メディアタイプが[aural]の場合に、blockquote要素 を読み上げた後に、beautiful-music.wavを流す事が出来ます。同じように、
var:after { content: url("hensu.gif") }
として、画像を挿入する事も可能です。ただ、こういった生成内容に代替テキストを付けたりという事は、今のところ出来ません。

代替テキスト等、属性値を呼び出す事は出来ます。
img:before { content: attr(alt) }
こうすると、img要素 の alt属性 の値を img要素 の直前に書き出す事が出来ます。

生成内容中にエスケープ文字"\A"を記述すると、改行、つまりHTMLでいう br要素 のような事が出来ます。
h1:before {
  display: block;
  content: "Yeah!\A これが第一章の始まりだゼ\A ベイベェ";
}

こうすると、h1要素 の手前に、
Yeah!
これが第一章の始まりだゼ
ベイベェ

と書き出されます

以下の組み合わせが可能です。

セレクタの主体 疑似要素に使用可能な'display'の値
ブロック要素 [none]、[inline]、[block]、[marker]
これ以外の値を指定すると、[block]として扱われます。
インライン要素 [none]、[inline]
これ以外の値を指定すると、[inline]として扱われます。

二重引用符の中で二重引用符を使用したい場合などでも、このエスケープする方法が使えます。
h1:before { content: "\""; }

関連疑似要素
関連プロパティ

page top
最終更新日:2004年02月28日
Copyright © 2002-2004 ばあど All Rights Reserved.