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

::after создаёт псевдоэлемент после содержимого элемента. Этот псевдоэлемент работает только совместно со стилевым свойством content, которое определяет содержимое для вставки. Не у всех элементов есть собственное содержимое, поэтому ::after не даёт результата для <img>, <input> и ряда других элементов.

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

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

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

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

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

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

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

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

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

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>::before</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>

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

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

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

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

Блок с цитатой

::before и ::after прекрасно подходят для оформления цитат, в частности, вывода увеличенных кавычек, которые показывают пользователям, что перед ними цитата (рис. 3).

Вид цитаты с кавычками

Рис. 3. Вид цитаты с кавычками

Для отображения кавычки перед текстом мы используем ::before, а после текста — ::after. К ним же добавляем и желаемое оформление кавычек, вроде изменения цвета и размера (пример 3).

Пример 3. Кавычки в цитате

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Цитата</title> <style> blockquote { background: #f9f0de; /* Цвет фона */ border-left: 2px solid #0083ca; /* Линия слева */ padding: 1em; /* Поля вокруг текста */ } blockquote::before, blockquote::after { content: "“"; /* Левая кавычка */ font-size: 40px; /* Размер текста кавычек */ color: #c1172c; /* Цвет кавычек */ line-height: 0; /* Текст не занимает место */ } blockquote::after { content: "”"; /* Правая кавычка */ } </style> </head> <body> <blockquote>Чаще всего выход там, где был вход.</blockquote> </body> </html>

Хлебные крошки

Хлебные крошки представляют собой разновидность навигации по сайту, которая показывает путь к текущему документу и его положение в иерархии сайта (рис. 4).

Хлебные крошки

Рис. 4. Хлебные крошки

Для создания такой навигации обычно применяется список <ul>, а внутри пунктов <li> вставляются ссылки на соответствующие разделы сайта. Чтобы отделить ссылки друг от друга, между ними вставляется разделитель, в качестве него обычно используется косая черта, но можно использовать стрелку и другие символы.

Разделитель добавляем через свойство content и селектор li + li::before, он выберет все элементы <li> кроме первого (пример 4).

Пример 4. Хлебные крошки

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Хлебные крошки</title> <style> .breadcrumbs { margin: 0; /* Убираем отступы */ padding: 10px; /* Поля вокруг текста */ background: #b2d235; /* Цвет фона */ } .breadcrumbs li { display: inline-block; /* Размещаем список по горизонтали */ } .breadcrumbs a { color: #fff; /* Цвет ссылок */ text-decoration: none; /* Убираем подчёркивание у ссылок */ } .breadcrumbs li + li::before { content: '/'; /* Разделитель ссылок */ padding: 0 7px; /* Расстояние вокруг разделителя */ } </style> </head> <body> <ul class="breadcrumbs"> <li><a href="#">Главная</a></li> <li><a href="#">Картинки</a></li> <li><a href="#">Девушки</a></li> </ul> </body> </html>

Автор и редакторы

Автор: Влад Мержевич
Последнее изменение: 11.03.2020
Редакторы: Влад Мержевич
Как научиться разрабатывать сайты