Як використовувати псевдоелементи ::before та ::after в Elementor

Що таке ::before та ::after

Псевдоелемент — це віртуальний елемент, який браузер створює через CSS. Він не додається до HTML як окремий віджет, але може мати розміри, фон, рамку, позицію та інші стилі.

::before зазвичай розміщують перед вмістом елемента, а ::after — після нього. Проте фактичне місце залежить від CSS-властивостей 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. Так дизайн буде легше підтримувати.

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

• Перевірте десктопну та мобільну версії.
• Переконайтеся, що декоративний елемент не впливає на висоту або відступи неочікуваним чином.
• Перевірте сторінку в режимі без стилів редактора, якщо результат у конструкторі відрізняється від опублікованої версії.
• Очистьте кеш плагіна оптимізації, CDN і браузера після зміни CSS.
• Збережіть повторювані кольори та розміри в 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;
}