Summary  
This chapter covers using CSS pseudo-elements (::before and ::after) to insert decorative content and effects around elements without altering the HTML.  

General domain of usage  
Web user interface styling (e.g., enhancing navigation link hover effects)

Псевдоелементи `::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 (Cascading Style Sheets) — мови стилізації, що визначає зовнішній вигляд вебсторінок. Досліджуйте ключові поняття, такі як стилі тексту, кольори, відступи, модель коробки, Flexbox і декоративні ефекти. Формуйте навички створення візуально привабливих і структурованих вебсторінок. Ідеально підходить для початківців, які прагнуть закласти міцну базу в CSS.

Дізнайтеся, що таке CSS, як підключити його до HTML і як стилізувати елементи HTML за допомогою селекторів. Ознайомтеся з базовими поняттями, такими як кольори тексту, псевдокласи дій користувача та змінні в CSS.

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

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

Ознайомлення з Flexbox — потужним методом розміщення елементів у CSS для організації рядків і стовпців. Вивчення керування напрямком, вирівнюванням і відстанями між елементами по горизонталі та вертикалі, а також налаштування окремих flex-елементів для точного макетування.

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

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

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