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

Псевдоелементи ::before і ::after використовуються для створення додаткового контенту або декоративних елементів перед або після вмісту цільового елемента в HTML-документі. Ці псевдоелементи дозволяють вставляти контент або стилізувати цей додатковий контент за допомогою CSS без створення додаткових порожніх тегів в розмітці.

Псевдоелемент ::before дозволяє вставити контент перед вмістом цільового елемента.

.element {
  /* стилі цільового елемента */
}

Наприклад, такий код вставить параграф перед кожним елементом з класом .element:

.element::before {
  content: "Початок: ";
}

Псевдоелемент ::after дозволяє вставити контент після вмісту цільового елемента. Наприклад, такий код вставить параграф після кожного елемента з класом .element:

.element::after {
  content: " Кінець.";
}

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

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

Властивість content визначає контент, який буде вставлений перед (::before) або після (::after) вмісту цільового елемента на веб-сторінці.

content - це обов'язкова властивість, яка дозволяє додати текстовий контент всередину псевдоелемента. Якщо текст вставлятися не буде, всеодно потрібно встановити порожній рядок цій властивості, бо інакше псевдоелемент просто не створиться.

.element::before {
  content: "";
}

Псевдоелементи НЕ ВИКОРИСТВУЮТЬСЯ для додавання текстового контенту. Вони призначені тільки для декоративного оформлення. Асистивні технології та індексатори не сприймають текст всередині псевдоелемента. Цей текст також буде недоступний користувачеві, якщо не завантажиться файл стилів.

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

Псевдоклас :hover можна використовувати разом з псевдоселекторами ::before і ::after для створення динамічних інтерактивних ефектів при наведенні курсора на елемент на веб-сторінці. Це дозволяє змінювати стилі псевдоелементів, коли користувач наводить курсор на елемент.

Наприклад, якщо ви хочете змінити фон псевдоелемента ::before при наведенні курсора на елемент з класом .element, ви можете використовувати такий код:

.element::before {
  content: "";
  background-color: yellow;
  display: inline-block;
  width: 32px;
  height: 16px;
  margin-right: 10px;
  transition: all 0.3s ease; /* Додаємо плавний перехід для анімації зміни стилів */
}

.element:hover::before {
  background-color: blue;
}

Так само можна налаштувати ефект :hover і для псевдоелемента ::after.

.element:hover::after {
  background-color: red;
  width: 300px;
}

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

Псевдоелемент-іконка - це метод створення іконок або графічних елементів на сторінці за допомогою псевдоелементів ::before або ::after. Це дозволяє вставляти зображення або символи без додавання додаткових HTML-елементів.

Щоб створити псевдоелемент-іконку, потрібно визначити властивість content для псевдоелемента та задати йому значення, яке представляє іконку. Зазвичай це символ Unicode або URL зображення.

Приклад з символом Unicode

.icon::before {
  content: "✓"; /* Cимвол галочки (✓) */
  color: green; /* Колір іконки */
  font-size: 24px; /* Розмір іконки */
}

Приклад з URL зображення

.icon::before {
  content: "";
  display: inline-block;
  width: 24px; /* Ширина іконки */
  height: 24px; /* Висота іконки */
  background-image: url('icon.png'); /* URL зображення */
  background-size: cover; /* Розмір зображення */
}

Головне - правильно встановити налаштування в CSS. Потрібно вказати властивість content, як пустий рядок, задати властивість display як inline-block або inline-block, а також задати ширину і висоту (width і height).