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

Покращити цю статтю

Допрацюйте відповідь до «Що робить ::before?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

`::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. Це один з ключових інструментів для чистої і гнучкої верстки.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати191 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.