::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.
Рис. 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.
Рис. 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>