CSS 上級チュートリアルの疑似要素

擬似要素は、 selector:pseudoelement { property: value } の形式を使用して、擬似クラスと同様にセレクターを吸い込みます。吸盤は4つあります。
最初の文字と最初の行
最初の文字の擬似要素は要素の最初の文字に適用され、最初の行は要素の先頭行になります。たとえば、次のように、最初の行を太字にしてドロップキャップを付けた段落を作成できます。
p:first-letter {
font-size: 3em; float: left;
p:first-line {
font -weight: 太字;
}
before と after
before と after 疑似要素とコンテンツ属性を要素の両側で使用して、HTML を変更せずにコンテンツの両側の内容を変更します。
content 属性の値は、open-quote (開き引用符)、close-quote (閉じ括弧)、no-open-quote (開き括弧なし)、no-close-quote (閉じ括弧なし)、任意の文字にすることができます。引用符付き 文字列または画像の場合は、url(imagename) を使用します。
blockquote:before {
content: open-quote;
}
blockquote:after {
content: close-quote;
}
li:before {
content: "POW: "
}
p:before {
content: url(images/jam.jpg)
}
注意
いいですね、ダニット?そうですね、それらが多すぎるため (うーん、ため息)、IE がそれらに夢中になっているため、ほとんどのユーザーは効果の前後を見ることができません。怠け者...

m.sbmmt.com) に注目してください。