ばけらの CSSリファレンス

:before擬似要素と :after擬似要素には、contentプロパティを指定して内容を持たせることが出来ます。たとえば、全ての blockquote要素の前に「以下は引用です」という一文を加えたいのであれば、以下のようにします。

blockquote:before{
 display: block;
 content: "以下は引用です。"
}

content プロパティは、以下のような値をとります。

• <文字列> …… 文字列を指定します。指定された文字列がそのまま内容となります。
• <URI> …… 外部リソースの URI を指定します。たとえば、画像を要素の内容としたい際に画像の URI を指定することが出来ます。ユーザエージェントがそのリソースを扱えない場合は、単純に無視されます。代替テキストのようなものは指定できませんので、利用の際には注意してください。
• <カウンタ> …… 「1,2,3……」「い,ろ,は……」などの連番を内容とします。詳しくは<カウンタ>の項を参照してください。
• attr(X) …… 当該要素の X属性の値を内容とします。たとえば、attr(title)とすると、title属性で指定されている値が要素の内容となります。残念ながら CSS2 では、他の要素の属性値を参照することは出来ません。
• open-quote …… 引用開始を示す引用符を内容とします。引用符の種類は quotesプロパティによります。引用開始とみなされ、引用の入れ子レベルが一つ増えます。

• close-quote …… 引用終了を示す引用符を内容とします。引用符の種類は quotesプロパティによります。引用終了とみなされ、引用の入れ子レベルが一つ減ります。

• no-open-quote …… 何も表示しませんが、引用開始とみなします。引用の入れ子レベルがひとつ増えます。
• no-close-quote …… 何も表示しませんが、引用終了とみなします。引用の入れ子レベルがひとつ減ります。

「引用の入れ子レベル」については quotesプロパティを参照してください。

以上の指定は、組み合わせて使うことも可能です。

このプロパティは、:before擬似要素、:after擬似要素、display: marker である要素に指定した場合に限って効果を発揮します。それ以外の要素に指定しても効果はありませんし、子孫要素に継承されることもありません。

quotesプロパティは、引用符を設定します。

値 none を設定すると引用符は無しになります。

引用符を指定する場合は、文字列を二つ指定します。最初の文字列が引用開始、次の文字列が引用終了となります。たとえば、

q { quotes:  "「" "」"; }

とすると、かぎ括弧が引用符となりますし、

q { quotes:  "<引用>" "</引用>"; }

とすると、XMLのタグ風の文字列で引用を表します。

さらに、引用開始と引用終了の組を複数指定することで、引用の入れ子レベルに応じて引用符を変えることもできます。たとえば

q        { quotes:  "「" "」" "『" "』"; }
q:before { content: open-quote; }
q:after  { content: close-quote; }

としますと、

<q><q>引用</q>を引用する</q>という言葉を引用

というマーク付けをされたものは、以下のようになります。

それをさらに引用すると……

<q><q><q>引用</q>を引用する</q>という言葉を引用</q>

こうなります。

このとき、"「」" が使われるのか、それとも "『』" が使われるのかは、引用の入れ子レベルによって決まります。q要素の開始タグが現れると入れ子が深くなり、入れ子レベルは増えます、終了タグが現れると入れ子は浅くなり、レベルは減ります。一番外側の引用では quotes プロパティで最初に指定した引用符の組(例では 「」)が使われ、入れ子レベルが一つ増えると二番目の組(例では『』)が使われます。以降入れ子レベルが増えるたびに次の組が使われるのですが、例では引用符は二組しか登録されていませんので、三番目は最初に戻ります(例では「」)。以降、一番目と二番目の引用符が繰り返し登場することになります。

説明文未完成。待て次号！