Можно ли сделать Transition для псевдоелементов?

Да, с использованием CSS3 трансформаций и переходов вы можете создавать переходы для псевдоэлементов в HTML.

Transition - это способ добавления анимации и плавности в изменения стилей элементов при каких-либо событиях, таких как наведение курсора или клик. В CSS3, Transition позволяет определить время длительности анимации и функцию распределения времени, которая определяет, как анимация должна происходить со временем.

Однако, вначале необходимо убедиться, что вы указали свойство, которое вы хотите анимировать на псевдоэлементе. Например, вы можете добавить переход для псевдоэлемента ::before, используя следующий код:

a::before {
  content: "";
  background-color: red;
  transition: background-color 0.5s ease-in-out;
}

a:hover::before {
  background-color: blue;
}

В приведенном выше примере, мы задаем фоновый цвет псевдоэлемента ::before как красный. Затем, при наведении курсора на элемент <a>, мы изменяем фоновый цвет на синий за 0,5 секунды с плавным входом и выходом (ease-in-out).

Вы также можете использовать другие свойства, такие как width, height, transform и др., чтобы настроить анимацию псевдоэлемента.

Но стоит отметить, что не все свойства могут быть анимированы с помощью Transition. Некоторые свойства могут иметь разные результаты анимации в зависимости от браузера, поэтому рекомендуется проверить поддержку свойства в различных браузерах, прежде чем использовать их для анимации псевдоэлементов.

В целом, с помощью Transition вы можете создавать анимацию для псевдоэлементов в HTML, что позволяет вам добавлять интерактивные и привлекательные визуальные эффекты на вашем веб-сайте.