擬似要素

:first-line擬似要素

ブロックレベル要素に含まれる内容のうち、最初の1行に適用される ものを記述するのが :first-line 擬似要素である。

ul li:first-line {
  background: yello; color: red
}

とすると、ul要素内の li 要素の最初の1行目が黄色地に赤になる。

設定できる特性は、フォントに関するもの、色に関するもの、背景に関する もの、word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height, text-shadow,clear に限られる。 5.12.2

:first-letter擬似要素

:first-line擬似要素と同様だが、最初の1字に適用されるものを 記述するのが :first-letter擬似要素である。

適用できる特性は、:first-lineのものにくわえ、マージン、ボーダー、 パディング、float に限られる。

:before, :after擬似要素

特定の要素の内容物の前(:before)または後(:after)に特定の 内容を挿入することができる。章番号や章区切りのアイコンなどを 自動挿入させるために利用できる。

CSS2には通し番号を自動生成する機構が定められているが、現状(2006年現在) では、実際に通し番号を生成できる機能を持つユーザエージェントは限られている。 Operaはその少ない実装の一つである。

自動挿入する内容は、content特性によって指定する。 以下のものは全てのh2要素の内容を 【 】 という括弧で括るための 定義である。

これにより、

<h2>ほげほげ</h2>

は、

とレンダリングされる。

通し番号自動生成機能を持つユーザエージェントではさらに、

h1:before {
    content: "第" counter(chapter) "章";
}
h1 {
    counter-increment: chapter; counter-reset: section;
}
h2:before {
    content: counter(chapter) "." counter(section);
}
h2 {
    counter-increment: section;
}

と定義しておくことで、

<h1>序論</h1>
<h2>これまでのあたい</h2>
<h1>結論</h1>
<h2>展望</h2>

参考: Firefox 8.0で この部分を見た画面の一部

が、

とレンダリングされる。