Какие знаешь псевдоэлементы

Псевдоэлементы позволяют стилизовать определённые части элемента без добавления лишнего HTML. Основные:

::before - создаёт псевдоэлемент перед содержимым

.element::before {
  content: "★";
  color: gold;
}

::after - создаёт псевдоэлемент после содержимого

.element::after {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background: red;
}

::first-letter - стилизует первую букву текста

p::first-letter {
  font-size: 2em;
  color: blue;
}

::first-line - стилизует первую строку текста

p::first-line {
  font-weight: bold;
}

::selection - стилизует выделенный пользователем текст

::selection {
  background: yellow;
  color: black;
}

Важно: content обязателен для ::before и ::after. Двойное двоеточие (::) - современный синтаксис, но поддерживается и одинарное (:) для обратной совместимости.