⚙️ Что такое псевдоэлементы в CSS и как они используются?

Псевдоэлементы в CSS — это инструменты, которые позволяют стилизовать определенные части элемента, такие как первая буква, первая строка, или добавлять контент до или после элемента. Они начинаются с :: (например, ::before или ::after) и не требуют изменения HTML-разметки.

➡️ Пример:

<p class="text">Это пример текста.</p>

<style>
  .text::before {
    content: "👉 "; /* Добавляем символ перед текстом */
    color: red;
  }

  .text::after {
    content: " ✔️"; /* Добавляем символ после текста */
    color: green;
  }
</style>

🗣️ В этом примере с помощью псевдоэлементов ::before и ::after добавляются символы перед и после текста. Это удобный способ дополнить стиль без изменения HTML.

🖥 Подробнее тут