Псевдоэлементы

Псевдоэлементы прикрепляются к селекторам схожим образом, что и псевдоклассы. Их структура выглядит так: селектор:псевдоэлемент { свойство: значение; }.

Буквица и первая линия

Псевдоэлемент first-letter описывает первую букву элемента, а first-line — первую строку элемента. Например, можно подготовить буквицу и первую строку для абзаца благодаря этому коду:

p:first-letter {
	font-size: 3em;
	float: left;
}

p:first-line {
	font-weight: bold;
}

Псевдоэлементы before и after применяются совместно со свойством content для того, чтобы разместить контент по любой из сторон элемента, не внося изменений в 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)
}

Выглядит удивительно, не правда ли? Увы, но большая часть пользователей не смогут восхититься эффектами before и after, т.к. IE просто не распознает их. Ну разве парни из Microsoft не ленивы?