Каждый, кто хоть раз пытался применить анимацию к псевдоэлементу при помощи JavaScript, сталкивался с этой проблемой. Вот что об этом говорится в документации одной из популярных JavaScript-библиотек для анимации Anime.js:

Pseudo elements can't be targeted using JavaScript.

Можно было бы на этом поставить точку и пройти мимо, но мы же не привыкли так быстро отступать.

Далее я покажу как легко обойти это ограничение и применить анимацию к любому псевдоэлементу.

Решение

1. Указываем свойства псевдоэлемента, к которым хотим применить анимацию, через CSS-переменные. В этом примере мы хотим применить анимацию к размерам псевдоэлемента :after, например, плавно увеличить и уменьшить его:

#element {
  --size: 3rem;
}
 
#element::after {
  width: var(--size);
  height: var(--size);
}

2. Добавляем в проект JavaScript-библиотеку для анимации Anime.js:

npm i animejs

3. Запускаем анимацию посредством плавного изменения CSS-переменной:

import anime from 'animejs';
 
const element = document.querySelector('#element');
 
const properties = {
  size: '3rem'
};
 
anime({
  targets: properties,
  size: '4rem',
  duration: 1000,
  direction: 'alternate',
  easing: 'linear',
  update: () => {
    element.style.setProperty('--size', properties.size);
  }
});