Summary  
This chapter teaches how to use CSS ::before and ::after pseudo-elements to inject and style decorative content—such as icons, accents, and animated arrows—without altering HTML, covering the essential content property, positioning, and hover/focus transitions.  

General domain of usage  
Web interface styling

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 і декоративні ефекти. Розвивайте навички створення візуально привабливих і структурованих вебсторінок.

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

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