関連疑似要素

• :before、:after

関連プロパティ

• counter-reset
• counter-increment
• quotes
• display

content

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

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

こうやって'content'で作った、ソースに無い付け足された内容を、生成内容と呼びます。この生成内容は、主体の一部として扱われます。例えば、こうすると、
p.note:before { content: "注) " }
p.note        { border: solid green }
"注) "の部分も、緑色の枠線で囲まれます。プロパティの指定は、継承出来るものをすべて継承します。

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

@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!
これが第一章の始まりだゼ
ベイベェ
と書き出されます。

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

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