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

Псевдоэлементы создают впечатление, что к коду добавляются дополнительные элементы, несмотря на то, что на самом деле никаких дополнительных элементов нет. Вот несколько примеров. При помощи такого псевдокласса:

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

Обратите внимание, что поисковые системы не могут выбирать содержимое псевдоэлементов (так как они не встречаются в коде). Не используйте псевдоэлементы для указания важного контента, который должен быть виден для поисковых систем.