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

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

p::first-letter { color: red }

Далее перечислим наиболее распространённые псевдоэлементы.

::first-letter

Определяет стиль первого символа в тексте элемента, к которому добавляется. Это позволяет создавать в тексте буквицу и выступающий инициал. Буквица представляет собой увеличенную первую букву, базовая линия которой ниже на одну или несколько строк базовой линии основного текста. Выступающий инициал — увеличенная прописная буква, базовая линия которой совпадает с базовой линией основного текста.

::first-letter будет работать только для блочных текстовых элементов вроде <div> и <p>.

Рассмотрим пример создания выступающего инициала. Для этого требуется добавить к селектору p псевдоэлемент ::first-letter и установить желаемый стиль буквы. В частности, увеличить размер текста и поменять его цвет (пример 1).

Пример 1. Использование ::first-letter

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Псевдоэлементы</title> <style> p { font-family: Arial, Helvetica, sans-serif; /* Гарнитура шрифта основного текста */ } p::first-letter { font-family: 'Times New Roman', Times, serif; /* Гарнитура шрифта первой буквы */ font-size: 2em; /* Размер первой буквы */ color: red; /* Красный цвет текста */ } </style> </head> <body> <p>Луч фонарика высветил старые скрипучие ступени, по которым не далее как пять минут назад в дом поднялся Паша. Оля осторожно приоткрыла дверь и посветила внутрь дома. Луч света, словно нехотя, пробивался сквозь тугую завесу из мрака и пыли.</p> <p>Взгляд Оли опустился на пол, и она вскрикнула. В пустом помещении никого не было, и лишь на полу валялась порванная туфля Паши.</p> </body> </html>

В данном примере изменяется шрифт, размер и цвет первой буквы каждого абзаца текста. Результат примера показан на рис. 1.

Создание выступающего инициала

Рис. 1. Создание выступающего инициала

::first-line

Определяет стиль первой строки блочного текста. Длина этой строки зависит от многих факторов, таких как используемый шрифт, размер окна браузера, ширина блока, языка и др.

К псевдоэлементу ::first-line могут применяться не все стилевые свойства. Допустимо использовать свойства, относящиеся к шрифту, изменению цвет текста и фона.

В примере 2 показано использование псевдоэлемента ::first-line применительно к абзацу текста.

Пример 2. Выделение первой строки текста

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Псевдоэлементы</title> <style> p::first-line { font: bold 16px Arial, sans-serif; color: navy; } </style> </head> <body> <p>Луч фонарика высветил старые скрипучие ступени, по которым не далее как пять минут назад в дом поднялся Паша. Оля осторожно приоткрыла дверь и посветила внутрь дома. Луч света, словно нехотя, пробивался сквозь тугую завесу из мрака и пыли.</p> </body> </html>

Результат примера показан на рис. 2.

Результат применения псевдоэлемента ::first-line

Рис. 2. Результат применения псевдоэлемента ::first-line

В данном примере первая строка выделяется синим цветом и жирным начертанием. Обратите внимание, что при изменении ширины окна браузера, стиль первой строки остаётся постоянным, независимо от числа входящих в неё слов.

::after

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

В примере 3 показано использование псевдоэлемента ::after для добавления текста в конце абзаца.

Пример 3. Применение ::after

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Псевдоэлементы</title> <style> .new::after { content: " - Новьё!"; /* Добавляем после текста абзаца */ color: red; /* Красный цвет текста */ font-style: italic; /* Курсивное начертание */ } </style> </head> <body> <p class="new">Ловля льва в пустыне с помощью метода золотого сечения.</p> <p>Метод ловли льва простым перебором.</p> </body> </html>

Результат примера показан на рис. 3.

Добавление текста к абзацу с помощью ::after

Рис. 3. Добавление текста к абзацу с помощью ::after

В данном примере к содержимому абзаца с классом new добавляется дополнительное слово, которое выступает значением свойства content.

::before

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

Не у всех элементов есть собственное содержимое, поэтому ::after и ::before не дают результата для <img>, <input> и ряда других элементов.

Пример 4. Использование ::before

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Псевдоэлементы</title> <style> ul { list-style: none; /* Прячем маркеры списка */ } li::before { content: "✿"; /* Добавляем символ */ padding-right: 7px; /* Расстояние от текста до маркеров */ color: red; /* Красный цвет маркеров */ } </style> </head> <body> <ul> <li>Чебурашка</li> <li>Крокодил Гена</li> <li>Шапокляк</li> <li>Крыса Лариса</li> </ul> </body> </html>

Результат данного примера показан на рис. 4.

Изменение вида маркеров с помощью ::before

Рис. 4. Изменение вида маркеров с помощью ::before

В данном примере псевдоэлемент ::before устанавливается для селектора li и определяет маркеры списка. Добавление желаемых символов происходит путём задания значения свойства content.

Перейти к заданиям

Автор: Влад Мержевич
Последнее изменение: 23.01.2024