Псевдоэлемент first-line

Если с буквицей можно разобраться и без помощи псевдоэлементов, то задать стиль оформления первой строки абзаца таким образом не удастся. Нельзя просто выделить часть строки, например, при помощи тега <span>, определить класс и задать оформление для него, потому что обычно заранее неизвестно разрешение монитора пользова­теля, от которого напрямую зависит, сколько слов поместится в первой строке в окне браузера. Тем не менее это довольно частый прием при оформлении публикаций и новостей, где первая часть выделяется по сравнению с остальным текстом, так как именно в начале содержится суть сообщения. С помощью псевдоэлемента first-­line это мож­но сделать довольно легко. При этом мы не будем зависеть от разрешения монитора или других факторов. Браузер будет генерировать страницу, и после того, как определит конец первой строки, применит к ней стиль. В таблице стилей при этом должно быть записано, например, такое правило:

p:first-­line{font-­style: italic}

В этом случае первая строка любого абзаца в документе будет написана курсивом.

Псевдоэлементы :after и :before

Псевдоэлемент :after применяется для отображения дополнительного контента после содержимого элемента, за которым этот псевдоэлемент следует в селекторе правила. Добавляемый контент задается свойством content правила.

Аналогично, псевдоэлемент :before используется для отображения дополнительного контента перед содержимым элемента, за которым этот псевдоэлемент следует в селекторе правила. Добавляемый контент задается свойством content правила.

Для обоих псевдоэлементов характерны следующие особенности:

при стилизации блочного элемента, значение свойства display может быть только: block, inline, none, marker; все остальные значения будут трактоваться как block;

при стилизации строчного элемента, значение свойства display ограничен значениями inline и none; все остальные будут восприниматься как inline.

Кроме того, псевдоэлемент :before наследует стиль от элемента, за которым этот псевдоэлемент следует в селекторе правила.

Например, следующие три правила таблицы стилей:

h1 {font-size: 2em; color: red; font-style: italic; }

h1:before {content: url('/images/bullet01.png'); }

h1:after {content: url('/images/bullet02.png'); }

в результате стилизации заголовка:

<h1>Приключения Алисы в стране чудес</h1>

выведут левую (bullet01.png) и правую (bullet02.png) завитушки перед и после текста «Приключения Алисы в стране чудес» в строке заголовка первого уровня.

­Псевдоклассы

Кроме псевдоэлементов, в CSS существуют еще и псевдоклассы, которые основываются на информации, не являющейся частью НТМL­документа. Есть псевдоклассы, обозначающие посещенные, не посещенные, а также активные гиперссылки. Однако, базируясь только на тексте НТМL-документа нельзя определить, какая из гиперссылок является посещенной, какая в данный момент активна и т. д. Этой информацией владеет непосредственно браузер.

Наиболее используемые псевдоклассы перечислены в табл. 4.

Таблица 4 Список псевдоклассов

Формат	Название	Условие стилизации элемента
a:link	Гиперссылка	Гиперссылка еще не посещалась.
a:active	Активный	Щелчок мышью по элементу (возможно, гиперссылке).
a:visited	Посещенная гиперссылка	Гиперссылка, по которой уже производился переход.
a:hover	Курсор над элементом	Наведение курсора мыши на элемент.
a:focus	Фокус	Получение фокуса ввода элементом, т. е. элемент готов принимать ввод с клавиатуры или может редактироваться любым другим образом.
a:first-child	Первый дочерний	Стилизуется первый дочерний элемент a любого родителя.
a:lang	Язык элемента	Задает язык содержимого элемента a.