Псевдоэлементы, как и псевдоклассы, "присасываются" к селекторам и имеют форму селектор:псевдоэлемент { свойство: значение; }. Существует четыре таких "прилипалы".
Первая буква и первая строка
Псевдоэлемент 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 не обременяет себя реализацией этих возможностей.