Как использовать CSS ::before и ::after для создания пользовательских анимаций и переходов

Как сделать плавный анимированный переход на сайте без использования специальных библиотек? Урок использования псевдоэлементов CSS для создания эффектов: от анимированной кнопки до карточки профиля. Подходит новичкам.

Чтобы применить на практике методы из статьи, нужно:

• Базовое понимание HTML

• Базовое понимание CSS

• Редактор кода и браузер

Что такое псевдоэлементы

Псевдоэлементы — это селекторы CSS , которые используют для вставки содержимого, которого нет в исходном коде, их используют для стилизации определённой части выбранного элемента. Начинаются они с двойного двоеточия: ::before, ::after, ::placeholder, ::first-letter. В этой статье речь пойдёт только про использование ::before и ::after.

Псевдоэлемент ::before вставляет содержимое перед элементом.

h1::before {
  content: "