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

Псевдоэлементы, как и псевдоклассы, "присасываются" к селекторам и имеют форму селектор:псевдоэлемент { свойство: значение; }. Существует четыре таких "прилипалы".

Первая буква и первая строка

Псевдоэлемент 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(имя_файла_изображения).

blockquote:before {
   content: open-quote;
}

blockquote:after {
   content: close-quote;
}

li:before {
   content: "POW: "
}

p:before {
   content: url(images/jam.jpg)
}

Звучит здорово, не так ли? Однако пользователям увидеть всего этого, как и многого другого из возможностей CSS, не дано, так как IE не обременяет себя реализацией этих возможностей.