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

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

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

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

   ```css
   .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":

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

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