Как использовать псевдоэлементы ::before и ::after в Elementor

Что такое ::before и ::after

Псевдоэлемент — это виртуальный элемент, который браузер создаёт с помощью CSS. Он не добавляется в HTML как отдельный виджет, но может иметь размеры, фон, рамку, позицию и другие стили.

::before обычно размещают перед содержимым элемента, а ::after — после него. Однако фактическое положение зависит от свойств display и position. Для простой декоративной линии после заголовка удобно использовать ::after, а для фона или акцента перед текстом — ::before.

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

• не нужно создавать отдельный контейнер или виджет;
• декоративный стиль можно изменить в одном CSS-правиле;
• структура секции остаётся проще;
• визуальный элемент не добавляет лишний текст в контент страницы.

Как подготовить элемент в Elementor

Сначала добавьте класс к виджету или контейнеру, который должен получить декоративный элемент. В качестве примера используем класс section-title. Название класса вводится без точки: точка нужна только в CSS-селекторе.

В Elementor класс обычно добавляют в дополнительных настройках элемента, в поле CSS Classes. После этого CSS можно разместить в Custom CSS Elementor Pro, стилях темы или другом подключённом файле стилей.

Если правило добавляется непосредственно к конкретному виджету через поле Custom CSS в Elementor, вместо названия класса часто используют специальный селектор selector. Это позволяет обратиться именно к текущему элементу.

• Добавьте к виджету класс section-title.
• Убедитесь, что класс одинаково написан в HTML и CSS.
• Для глобального правила используйте .section-title.
• Для CSS конкретного виджета используйте selector::before или selector::after, если это предусмотрено полем Custom CSS.
• После сохранения очистите кеш сайта и браузера, если изменения не отображаются.

.section-title {
  position: relative;
}

.section-title::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin-top: 12px;
  background: #2f80ed;
  border-radius: 3px;
}

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

Самый простой сценарий — добавить короткую линию после заголовка. В примере ниже ::after ведёт себя как обычный блочный элемент, поэтому переходит на новую строку. Значение margin-top определяет расстояние от текста заголовка.

Если линию нужно выровнять по центру, задайте для margin-left и margin-right значение auto. Для заголовка, выровненного по правому краю, можно использовать margin-left: auto. Цвет лучше брать из глобальной палитры сайта, чтобы не дублировать одно и то же значение в разных правилах.

Если высоту или ширину линии нужно изменить на мобильных устройствах, это можно настроить с помощью медиазапроса. Не стоит создавать отдельную копию заголовка только ради другой длины декоративного элемента.

• Для горизонтальной линии используйте display: block.
• Для короткой линии задайте фиксированную width.
• Для линии на всю ширину можно использовать width: 100%.
• border-radius создаёт мягкие закруглённые концы.
• Проверьте отступы, чтобы линия не прилипала к тексту или следующему блоку.

.section-title::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin-top: 12px;
  background-color: #2f80ed;
  border-radius: 3px;
}

@media (max-width: 767px) {
  .section-title::after {
    width: 36px;
    height: 2px;
    margin-top: 8px;
  }
}

Позиционирование и декоративные подложки

Для наложенных элементов используйте position: absolute. В этом случае родительскому элементу нужно задать position: relative, чтобы псевдоэлемент позиционировался относительно него, а не другого предка страницы.

Подложку обычно размещают с помощью ::before, задают ей top, right, bottom и left, а сам текст или изображение поднимают над ней с помощью position: relative и z-index. Свойство z-index работает предсказуемо только тогда, когда элементы имеют соответствующий контекст позиционирования.

Если псевдоэлемент перекрывает кликабельную кнопку или ссылку, добавьте pointer-events: none. Это позволит нажимать на элемент, расположенный под декоративным слоем.

• position: relative у родительского элемента создаёт точку отсчёта.
• position: absolute выводит декоративный объект из обычного потока документа.
• z-index помогает определить порядок наложения.
• overflow: hidden может обрезать декоративные фигуры, выходящие за пределы блока.
• pointer-events: none подходит для слоя, который не должен реагировать на нажатия.

.card {
  position: relative;
  overflow: hidden;
}

.card::before {
  content: "";
  position: absolute;
  top: 16px;
  right: 16px;
  width: 90px;
  height: 90px;
  background: rgba(47, 128, 237, 0.12);
  border-radius: 50%;
  pointer-events: none;
}

.card__content {
  position: relative;
  z-index: 1;
}

Что обязательно учитывать в CSS

Свойство content является обязательным для ::before и ::after. Для декоративного элемента используйте content: "". Если его пропустить, браузер обычно не создаст псевдоэлемент.

Не добавляйте в content текст заголовка, цену, название кнопки или другую важную информацию. Такой текст может дублировать контент, непредсказуемо обрабатываться скринридерами и усложнять перевод или редактирование страницы.

Псевдоэлементы подходят не для замены любых HTML-элементов. Например, изображение, функционально значимая иконка или элемент формы должны оставаться доступными в разметке, а не создаваться только с помощью CSS.

Также учитывайте специфичность селекторов Elementor и темы. Если правило не работает, проверьте, не перекрывается ли оно стилями виджета, глобальными настройками или другим CSS.

• Всегда добавляйте content: "" для декоративных псевдоэлементов.
• Не используйте псевдоэлементы для важного содержимого.
• Проверяйте контраст декоративных деталей на фоне.
• Не злоупотребляйте !important: сначала найдите правило, которое перекрывает ваш стиль.
• Не применяйте один и тот же класс к разным типам элементов без проверки результата.

Распространённые ошибки в Elementor

Если декоративная линия не появляется, чаще всего причина заключается в неправильном классе, пропущенном свойстве content или CSS, добавленном не в то поле. Проверьте элемент с помощью инструментов разработчика браузера: на вкладке Styles можно увидеть, применилось ли правило.

Ещё одна типичная проблема — использование selector в глобальном CSS-файле. selector работает как служебное обозначение в контексте CSS Elementor, но в общем файле стилей темы нужно указывать реальный класс, например .section-title::after.

При абсолютном позиционировании часто забывают добавить position: relative родительскому элементу. В результате фигура перемещается относительно другого контейнера или оказывается в неожиданном месте.

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

• Неправильная запись класса: section-title вместо .section-title в поле класса или наоборот.
• Отсутствует content.
• selector применён за пределами Custom CSS конкретного виджета.
• У псевдоэлемента задано absolute-позиционирование, но у родительского блока нет relative-позиционирования.
• Цвет псевдоэлемента совпадает с фоном.
• Кеш показывает старую версию CSS.
• Декоративный слой перекрывает кнопку или ссылку.

Где добавлять CSS и как проверить результат

Custom CSS в редакторе Elementor доступен не на всех тарифах и не во всех конфигурациях. Если в вашей версии нет этого поля, правило можно добавить через инструменты темы для дополнительных стилей, дочернюю тему или другой безопасный способ подключения собственного CSS. Конкретное расположение пунктов может различаться в зависимости от темы и настроек WordPress.

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

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

• Проверьте версии для компьютеров и мобильных устройств.
• Убедитесь, что декоративный элемент неожиданно не влияет на высоту или отступы.
• Проверьте страницу без стилей редактора, если результат в конструкторе отличается от опубликованной версии.
• После изменения CSS очистите кеш плагина оптимизации, CDN и браузера.
• Сохраняйте повторяющиеся цвета и размеры в CSS-переменных или глобальных настройках, если на сайте используется единая дизайн-система.

:root {
  --accent-color: #2f80ed;
  --title-line-width: 48px;
}

.section-title::after {
  content: "";
  display: block;
  width: var(--title-line-width);
  height: 3px;
  margin-top: 12px;
  background: var(--accent-color);
  border-radius: 3px;
}