Summary  
This chapter explains how to use CSS pseudo-elements (::before and ::after) to insert decorative content, position it relative to parent elements, and create interactive visual effects like hover animations without modifying HTML.

General domain of usage  
Web design

Learn how to use decorative pseudo-elements like ::before and ::after in CSS to enhance any element with visual effects. See how these selectors can add icons or text on hover and focus without changing your HTML structure. Use simple css examples. Do not provide full html document stucture. Focus on css mainly

Псевдоелементи `::before` та `::after` — це спеціальні селектори, які дозволяють вставляти вміст перед або після основного вмісту елемента. Їх використовують для додавання декоративних елементів, таких як іконки або рамки, до вмісту елемента без зміни фактичного HTML-коду.
```css
selector::before {
  /* some properties */
}

selector::after {
  /* some properties */
}
```
- `::before` додає вміст перед основним вмістом елемента;
- `::after` додає вміст після основного вмісту елемента.

Розглянемо наступний приклад, у якому потрібно додати декоративний ефект при наведенні на посилання:

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDx1bCBjbGFzcz0ibGlzdCI+CiAgICAgIDxsaSBjbGFzcz0iaXRlbSI+PGEgaHJlZj0iIyIgY2xhc3M9ImxpbmsiPmNvbnRhY3RzPC9hPjwvbGk+CiAgICAgIDxsaSBjbGFzcz0iaXRlbSI+PGEgaHJlZj0iIyIgY2xhc3M9ImxpbmsiPmRldGFpbHM8L2E+PC9saT4KICAgICAgPGxpIGNsYXNzPSJpdGVtIj48YSBocmVmPSIjIiBjbGFzcz0ibGluayI+cHJpY2U8L2E+PC9saT4KICAgICAgPGxpIGNsYXNzPSJpdGVtIj48YSBocmVmPSIjIiBjbGFzcz0ibGluayI+ZmFxPC9hPjwvbGk+CiAgICA8L3VsPgogIDwvYm9keT4KPC9odG1sPg==

Lmxpc3QgewogIG1hcmdpbi10b3A6IDA7CiAgbWFyZ2luLWJvdHRvbTogMDsKICBwYWRkaW5nLWxlZnQ6IDA7CiAgbGlzdC1zdHlsZTogbm9uZTsKCiAgZGlzcGxheTogZmxleDsKICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47CgogIGJhY2tncm91bmQtY29sb3I6IGRhcmtjeWFuOwogIHBhZGRpbmc6IDVweDsKICBib3JkZXItcmFkaXVzOiA0cHg7Cn0KCi5pdGVtIHsKICBwYWRkaW5nOiA1cHggMTBweDsKICBiYWNrZ3JvdW5kLWNvbG9yOiBhbnRpcXVld2hpdGU7CiAgYm9yZGVyLXJhZGl1czogNHB4OwogIG1hcmdpbjogNXB4Owp9CgoubGluayB7CiAgZGlzcGxheTogZmxleDsKICBhbGlnbi1pdGVtczogY2VudGVyOwogIHRleHQtZGVjb3JhdGlvbjogbm9uZTsKICBjb2xvcjogYmxhY2s7CiAgZm9udC1zaXplOiAzNnB4Owp9CgovKiBMZXQncyBwbGF5IHdpdGggdGhlIGBiZWZvcmVgIGNvbnRlbnQgKi8KLmxpbms6OmJlZm9yZSB7CiAgY29udGVudDogIiI7CiAgd2lkdGg6IDI0cHg7CiAgaGVpZ2h0OiAyNHB4OwogIGJhY2tncm91bmQtc2l6ZTogY292ZXI7Cn0KCi5saW5rOjpiZWZvcmUgewogIGRpc3BsYXk6IG5vbmU7CiAgbWFyZ2luLXJpZ2h0OiAxMHB4OwogIGJhY2tncm91bmQtaW1hZ2U6IHVybCgiaHR0cHM6Ly9jb2RlZmluaXR5LWNvbnRlbnQtbWVkaWEuczMuZXUtd2VzdC0xLmFtYXpvbmF3cy5jb20vY29kZS0xL2RlY29yYXRpdmUrcHNldWRvK2VsZW1lbnQrZXhhbXBsZS53ZWJwIik7Cn0KCi5saW5rOmhvdmVyOjpiZWZvcmUgewogIGRpc3BsYXk6IGJsb2NrOwp9CgovKiBMZXQncyBwbGF5IHdpdGggdGhlIGBhZnRlcmAgY29udGVudCAqLwoubGluazo6YWZ0ZXIgewogIGNvbnRlbnQ6ICJBZnRlciI7CiAgZm9udC1zaXplOiAxOHB4OwogIGNvbG9yOiBkYXJrYmx1ZTsKICBkaXNwbGF5OiBub25lOwogIG1hcmdpbi1sZWZ0OiAxMHB4Owp9CgoubGluazpob3Zlcjo6YWZ0ZXIgewogIGRpc3BsYXk6IGJsb2NrOwp9

Опануйте основи CSS — мови стилізації, яка змінює зовнішній вигляд і сприйняття вебсторінок. Дослідіть ключові концепції, такі як стилі тексту, кольори, відступи, модель коробки, Flexbox і декоративні ефекти. Розвивайте навички створення візуально привабливих і структурованих вебсторінок.

Зрозумійте, як CSS підключається до HTML і як стилі застосовуються за допомогою селекторів. Використання кольорів, стилізація тексту та ефекти наведення для керування візуальним оформленням.

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

Керування структурою макета за допомогою властивостей margin, padding, borders і width. Розуміння поведінки визначення розміру блоку та типів відображення елементів, таких як block, inline і inline-block.

Керування горизонтальними та вертикальними макетами за допомогою властивостей Flexbox. Налаштування напрямку, вирівнювання та відступів для структурування компонентів інтерфейсу користувача.

Покращення макетів за допомогою фонових кольорів, зображень, псевдоелементів і тіней. Оформлення візуальних компонентів для створення глибини та контрасту.

Створення ефектів за допомогою декоративних псевдоелементів