Псевдоэлементы не могут применяться к внутренним стилям, только к таблице связанных или глобальных стилей. :after Применяется для вставки назначенного контента после содержимого элемента. Этот псевдоэлемент работает совместно со стилевым свойством content, которое определяет содержимое для вставки. В примере показано использование псевдоэлемента :after для добавления текста в конец абзаца.
Результат:
:before По своему действию :before аналогичен псевдоэлементу :after, но вставляет контент до содержимого элемента. В примере показано добавление маркеров своего типа к элементам списка посредством скрытия стандартных маркеров и применения псевдоэлемента :before.
:first-letter Определяет стиль первого символа в тексте элемента, к которому добавляется. Это позволяет создавать в тексте буквицу и выступающий инициал.
Рассмотрим пример создания выступающего инициала. Для этого требуется добавить к селектору P псевдоэлемент :first-letter и установить желаемый стиль инициала. В частности, увеличить размер текста и поменять цвет текста (пример).
Пример:
Результат:
:first-line Определяет стиль первой строки блочного текста. Длина этой строки зависит от многих факторов, таких как используемый шрифт, размер окна браузера, ширина блока, языка и т.д.
Пример:
Результат:
Псевдоклассы.
Псевдокласс :invalid Применяется к полям формы, содержимое которых не соответствует указанному типу.
Псевдокласс :read-only Применяется к полям формы, у которых задан атрибут readonly.
Псевдокласс :active Определяет стиль активной ссылки.
Псевдокласс :default Применяет стиль к элементам форм, которые установлены по умолчанию в группе похожих элементов.
Псевдокласс :disabled Применяет стиль к заблокированным элементам форм.
Псевдокласс :empty Представляет пустые элементы, т.е. те, которые не содержат дочерних элементов, текста или пробелов.
