Псевдоелементи ::after і ::before

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

1. ::before: Цей псевдоелемент дозволяє вам вставити контент перед вмістом обраного елемента. Це може бути текст, зображення або будь-який інший візуальний контент.

   Наприклад, цей CSS-код вставить червоний трикутник перед текстом у всіх елементів з класом "example":

   .example::before {
       content: "";
       border-left: 10px solid transparent;
       border-right: 10px solid transparent;
       border-bottom: 10px solid red;
       display: block; /* Потрібно, щоб створити блочний елемент */
   }

2. ::after: Цей псевдоелемент працює аналогічно до ::before, за винятком того, що він дозволяє вставляти контент після вмісту обраного елемента.

   Наприклад, цей CSS-код вставить зображення після тексту у всіх елементів з класом "example":

   .example::after {
       content: url('icon.png');
       margin-left: 5px;
   }

Ці псевдоелементи дозволяють створювати складніший макет і візуальні ефекти за допомогою CSS без додаткового HTML-коду. Вони часто використовуються для створення різноманітних декоративних ефектів, таких як стрілки, маркери, піктограми тощо.