Часто на странице нужны чисто декоративные детали: короткая линия под заголовком, кавычки вокруг цитаты, значок-стрелка после ссылки, маленькая метка на карточке. Можно добавлять для каждой такой детали отдельный тег в HTML — но разметка распухнет от элементов, которые не несут смысла, а существуют только ради оформления. Псевдоэлементы ::before и ::after решают это элегантно: они позволяют добавить декоративное содержимое прямо из CSS, не трогая HTML. Разметка остаётся чистой и осмысленной, а всё украшение живёт в стилях.

После этого урока вы сможете добавлять декоративные элементы — линии, значки, метки — без единого лишнего тега, управляя ими целиком из CSS.

Что уже умеем / что добавим

Вы научились выбирать элементы по состоянию и по месту в структуре. Теперь добавим возможность создавать декоративные части элемента прямо в CSS. В сквозном проекте мы украсим заголовки секций сайта компании: добавим под каждым короткую акцентную линию — без вставки дополнительных тегов.

Что вы узнаете в рамках статьи

• Чем псевдоэлемент отличается от псевдокласса.
• Как работают ::before и ::after и куда они вставляют содержимое.
• Зачем псевдоэлементу обязательно свойство content.
• Как создавать декоративные линии и значки без лишних тегов.

Ключевые термины

• Псевдоэлемент — виртуальная часть элемента, создаваемая в CSS (записывается через двойное двоеточие).
• ::before — псевдоэлемент, вставляемый перед содержимым элемента.
• ::after — псевдоэлемент, вставляемый после содержимого элемента.
• content — обязательное свойство псевдоэлемента, задающее его содержимое (даже пустое).
• Декоративный элемент — часть оформления, не несущая смысловой нагрузки.

Псевдоэлемент против псевдокласса

Важно различать два похожих понятия. Псевдокласс (:hover, :first-child) выбирает уже существующий элемент в особом состоянии или положении. Псевдоэлемент (::before, ::after) создаёт новую виртуальную часть внутри элемента, которой в HTML нет. Отсюда и разница в записи: псевдокласс пишут через одно двоеточие, псевдоэлемент — через два (::).

Псевдоэлементы ::before и ::after добавляют содержимое в самое начало и в самый конец элемента — внутри него, до и после его основного содержимого. Это содержимое отображается на странице, но его нет в разметке: оно целиком описано в CSS. Поэтому псевдоэлементы идеальны для декора, который не должен засорять HTML.

Обязательное свойство content

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

.note::before {
  content: "Важно: ";
  font-weight: bold;
}

Перед текстом абзаца .note появится жирная надпись «Важно: », которой нет в HTML. Значение content может быть текстом, а может быть и пустой строкой content: "" — так делают, когда псевдоэлемент нужен только как декоративная фигура (линия, кружок), без текста. Запомните правило: нет content — нет псевдоэлемента. Это самая частая причина, по которой ::before/::after «не работают».

Декоративная линия под заголовком

Пустой псевдоэлемент с заданными размерами и фоном превращается в декоративную фигуру. Классический приём — короткая акцентная линия под заголовком:

.title {
  position: relative;
}

.title::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  background: #2d6cdf;
  margin-top: 8px;
}

Под текстом заголовка появится короткая синяя черта шириной 48 пикселей. Обратите внимание: content: "" обязателен, иначе линии не будет; display: block заставляет псевдоэлемент вести себя как блок и переносится на новую строку, а размеры и фон делают из него прямоугольник-линию. Всё оформление держится в CSS — в HTML по-прежнему только заголовок. Меняете цвет темы — линия меняется вместе с ним, ничего не трогая в разметке.

Значки и метки через content

Псевдоэлементы удобны и для небольших значков рядом с текстом. Например, добавить стрелку после ссылки или значок после внешней ссылки:

.link-more::after {
  content: " →";
  color: #2d6cdf;
}

После текста ссылки появится синяя стрелка, подсказывающая «читать дальше». Поскольку стрелка декоративная и добавлена через content, она не мешает смыслу и не требует отдельного тега. Тем же способом можно поставить кавычки вокруг цитаты (::before с открывающей, ::after с закрывающей) или маленькую метку. Важный нюанс доступности: содержимое из content — декоративное, и программы чтения с экрана могут его не озвучивать, поэтому важную по смыслу информацию через псевдоэлементы передавать не стоит — только украшение.

Применяем в проекте

Украсим заголовки секций сайта компании короткой акцентной линией — она задаст ритм и сделает блоки узнаваемее. Добавим её через ::after, не трогая HTML заголовков.

.section__title {
  position: relative;
  padding-bottom: 10px;
}

.section__title::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  background: #2d6cdf;
  margin-top: 8px;
}

Обновите страницу: под каждым заголовком секции появилась аккуратная синяя черта — оформление стало собраннее и профессиональнее. Мы не добавили ни одного тега: линия целиком описана в CSS через псевдоэлемент. Если позже вы поменяете акцентный цвет сайта, линии обновятся сами. Это чистый способ декорировать заголовки, не засоряя разметку.

Частые ошибки

• Забыть content.
  Без свойства content псевдоэлемент не появляется вовсе; для декоративных фигур пишите content: "".
• Одно двоеточие вместо двух.
  Псевдоэлементы принято писать через :: (::before); одинарное двоеточие — устаревшая запись, лучше использовать двойное.
• Смысл в псевдоэлементе.
  Важную по содержанию информацию нельзя прятать в content — она декоративна и может быть недоступна для скринридеров.
• Фигура без размеров.
  Пустому ::before/::after для видимой линии нужны display, размеры и фон, иначе он останется невидимым.

Итоги

Прекрасная работа — вы освоили псевдоэлементы! Теперь вы понимаете разницу между псевдоклассом и псевдоэлементом, умеете добавлять содержимое до и после элемента через ::before и ::after, знаете про обязательное свойство content и можете создавать декоративные линии и значки без единого лишнего тега. В сквозном проекте вы украсили заголовки секций акцентной линией, оставив разметку чистой.

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