Pseudo-elements `::before` and `::after` are special selectors that allow us to insert content before or after an element's content. We use them to add decorative elements, such as icons or borders, to an element's content without modifying the actual HTML content.
```css
selector::before {
  /* some properties */
}

selector::after {
  /* some properties */
}
```
- `::before` add the content before the element content;
- `::after` adds the content after the element content.

Let's consider the following example, where our task is to add some decoration for the hover effect on the links:

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

Lmxpc3QgewogIG1hcmdpbi10b3A6IDA7CiAgbWFyZ2luLWJvdHRvbTogMDsKICBwYWRkaW5nLWxlZnQ6IDA7CiAgbGlzdC1zdHlsZTogbm9uZTsKCiAgZGlzcGxheTogZmxleDsKICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47CgogIGJhY2tncm91bmQtY29sb3I6IGRhcmtjeWFuOwogIHBhZGRpbmc6IDVweDsKICBib3JkZXItcmFkaXVzOiA0cHg7Cn0KCi5pdGVtIHsKICBwYWRkaW5nOiA1cHggMTBweDsKICBiYWNrZ3JvdW5kLWNvbG9yOiBhbnRpcXVld2hpdGU7CiAgYm9yZGVyLXJhZGl1czogNHB4OwogIG1hcmdpbjogNXB4Owp9CgoubGluayB7CiAgZGlzcGxheTogZmxleDsKICBhbGlnbi1pdGVtczogY2VudGVyOwogIHRleHQtZGVjb3JhdGlvbjogbm9uZTsKICBjb2xvcjogYmxhY2s7CiAgZm9udC1zaXplOiAzNnB4Owp9CgovKiBMZXQncyBwbGF5IHdpdGggdGhlIGBiZWZvcmVgIGNvbnRlbnQgKi8KLmxpbms6OmJlZm9yZSB7CiAgY29udGVudDogIiI7CiAgd2lkdGg6IDI0cHg7CiAgaGVpZ2h0OiAyNHB4OwogIGJhY2tncm91bmQtc2l6ZTogY292ZXI7Cn0KCi5saW5rOjpiZWZvcmUgewogIGRpc3BsYXk6IG5vbmU7CiAgbWFyZ2luLXJpZ2h0OiAxMHB4OwogIGJhY2tncm91bmQtaW1hZ2U6IHVybCgiaHR0cHM6Ly9jb2RlZmluaXR5LWNvbnRlbnQtbWVkaWEuczMuZXUtd2VzdC0xLmFtYXpvbmF3cy5jb20vY29kZS0xL2RlY29yYXRpdmUrcHNldWRvK2VsZW1lbnQrZXhhbXBsZS53ZWJwIik7Cn0KCi5saW5rOmhvdmVyOjpiZWZvcmUgewogIGRpc3BsYXk6IGJsb2NrOwp9CgovKiBMZXQncyBwbGF5IHdpdGggdGhlIGBhZnRlcmAgY29udGVudCAqLwoubGluazo6YWZ0ZXIgewogIGNvbnRlbnQ6ICJBZnRlciI7CiAgZm9udC1zaXplOiAxOHB4OwogIGNvbG9yOiBkYXJrYmx1ZTsKICBkaXNwbGF5OiBub25lOwogIG1hcmdpbi1sZWZ0OiAxMHB4Owp9CgoubGluazpob3Zlcjo6YWZ0ZXIgewogIGRpc3BsYXk6IGJsb2NrOwp9

Introduction to CSS (Cascading Style Sheets), which is a styling language used to enhance the look and feel of web pages. We will cover how to deal with fonts, element positioning, colors, and other decorative effects.

Basic CSS concepts and rules to add styles to the web page.

Set of CSS properties that are used to style the text content of HTML elements.

Concept of arranging elements according to the box model, which describes the layout and spacing of all elements.

Method of arranging the set of elements in rows and columns.

Create visually stunning and interactive web designs by using advanced CSS techniques for adding decorative elements.

CSS Fundamentals

Decorative Pseudo-Elements