Псевдоэлементы ::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>

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

Автор: Влад Мержевич
Последнее изменение: 17.02.2018
Редакторы: Влад Мержевич
Курс по вёрстке сайта на CSS Grid