Псевдоелементи

Псевдоелементи ::before і ::after використовуються для додавання декоративних ефектів (іконок, плашок, оверлеїв) без необхідності створення додаткових порожніх тегів в розмітці.

• ::before - створює псевдоелемент перед усім контентом елемента (на початку).
• ::after - створює псевдоелемент після всього контенту елемента (в кінці).

.box {
  /* стилі елемента */
}

.box::before {
  /* стилі псевдоелемента before */
}

.box::after {
  /* стилі псевдоелемента after */
}

Корисно

За замовчуванням це рядкові елементи. Для того щоб задати псевдоелементу вертикальну геометрію, необхідно змінити його тип на блоковий або, здебільшого, на рядково-блоковий.

Властивість content

Ця обов'язкова властивість дозволяє додати текстовий контент всередину псевдоелемента. Навіть, якщо текстовий контент не потрібен, його значенням необхідно поставити порожній рядок, інакше браузер просто не створить псевдоелемент.

<div class="box">
  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officia itaque quia
  nobis fugit amet adipisci, corrupti animi, iusto eius a sed totam voluptas
  porro. Dolorem aliquid rerum magnam eligendi aspernatur.
</div>

У селекторі можна використовувати тільки один псевдоелемент, який повинен додаватися після простого селектора (тегу, класу, ідентифікатора).

.box::before {
  content: 'Це текст в ::before';
  font-size: 40px;
  color: orange;
}

.box::after {
  content: 'Це текст в ::after';
  font-size: 30px;
  color: teal;
}

Увага

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

Псевдоклас :hover

Для того щоб змінити стилі псевдоелемента під час події на батьківському елементі, наприклад ховері, необхідно використовувати наступний селектор.

/* Застосувати стилі до псевдоелемента .box :: before у разі ховера по елементу .box */
.box:hover::before {
  color: green;
}

/* Застосувати стилі до псевдоелемента .box :: after у разі ховера по елементу .box */
.box:hover::after {
  color: tomato;
}

Псевдоелемент-іконка

Використовуючи псевдоелементи, додамо іконки перед і після посиланнями у списку. Нехай ::before буде видно завжди, а ::after - тільки у разі ховера по посиланню.

Найважливіше знаходиться в цьому CSS-правилі. Змінюємо тип елемента на рядково-блоковий і задаємо фіксовану висоту і ширину. Також не забуваємо вказати властивість content з порожнім рядком, щоб браузер створив псевдоелемент.

.list-link::before,
.list-link::after {
  content: '';
  display: inline-block
  width: 24px;
  height: 24px;
}