擬似要素

::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)に特定の 内容を挿入することができる。章番号や章区切りのアイコンなどを 自動挿入させるために利用できる。

自動挿入する内容は、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>

が、

とレンダリングされる。