Псевдоэлементы прикрепляются к селекторам схожим образом, что и псевдоклассы. Их структура выглядит так: селектор:псевдоэлемент свойство: значение; .
Буквица и первая линия
Псевдоэлемент 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 не ленивы?