Skip to main content

Що робить ::before?

CSSJunior~1 хв читання
Запропонувати правку

::before, це псевдоелемент, який створює віртуальний елемент перед вмістом вибраного тегу. Він не існує в HTML-розмітці, але з'являється в CSS і може містити текст, іконку або декоративний елемент.

Як працює ::before

Щоб псевдоелемент з'явився, обов'язковою є властивість content:

css
p::before { content: "→ "; color: red; }

HTML:

html
<p>Текст</p>

Результат: На сторінці буде відображатися так:

javascript
→ Текст

Що можна робити з ::before

  • додавати текст або символи (content: "*")
  • додавати іконки (зокрема через шрифти, наприклад FontAwesome)
  • створювати декоративні елементи (стрічки, смуги, рамки)
  • використовувати як додатковий шар для оформлення (background, позиціонування)

Наприклад, декоративна смужка:

css
h1::before { content: ""; display: block; width: 50px; height: 4px; background: black; margin-bottom: 10px; }

Особливості

  • не відображається без content
  • вважається дочірнім елементом у візуальному сенсі, але не в DOM
  • часто використовується разом із position: absolute для складних ефектів
  • у ::before є «пара», ::after, який працює аналогічно, але вставляє контент після елемента

Підсумок

::before, це спосіб додати декоративний або допоміжний контент перед елементом, не змінюючи HTML. Це один з ключових інструментів для чистої і гнучкої верстки.

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Запропонувати правку