Псевдоэлементы
Псевдоэлементы создают впечатление, что к коду добавляются дополнительные элементы, несмотря на то, что на самом деле никаких дополнительных элементов нет. Вот несколько примеров. При помощи такого псевдокласса:
х: first-letter /* где вместо х следует подставить нужный тег*/
p:firstletter {font-size:300%; float: left;}
создается большая прописная буква в начале абзаца. А этот псевдокласс:
х: first-line /* где вместо х следует подставить нужный тег */
позволяет применить стиль к первой строке (абзаца или текста):
р:first-line {font-varient:small-caps}
Данное правило указывает, что первую строку следует отображать маленькими заглавными буквами. На страницах с гибкой разметкой, когда в зависимости от размера окна браузера длина строки варьируется, формат слов автоматически меняется и заглавными буквами отображается только первая строка.
Эти два псевдокласса:
x:before и x:after
добавляют определенный текст перед элементом и после него. Таким образом, код:
<h1 class="age">25</h1>
и стили:
h1.age:before {content: "Возраст: "}
hl.age: after {content:" лет"}
дают Возраст: 25 лет. Обратите внимание на пробелы внутри текста, обеспечивающие место для вставки нужного контента. Эти селекторы особенно удобно использовать, когда содержимое тегов генерируется, например, для вывода запроса к базе данных.
Есть еще четыре псевдокласса: : lang, применяемый к содержимому с указанным определенным кодом языка и псевдоклассы :left, :right, :first, применяемые к печати содержимого, а не к его просмотру на экране. Они редко используются и слабо поддерживаются браузерами, поэтому мы не будем подробно их описывать.
Обратите внимание, что поисковые системы не могут выбирать содержимое псевдоэлементов (так как они не встречаются в коде). Не используйте псевдоэлементы для указания важного контента, который должен быть виден для поисковых систем.