Анимация псевдоэлементов

Можно ли применить CSS-анимацию к ::before и ::after? Да! Они работают так же, как и обычные элементы.

При этом анимация свойства content немного интереснее. В браузерах, отличных от Safari, оно может быть анимировано дискретно, то есть content будет переходить от одного значения к другому без какого-либо плавного перехода.

div::before {
  content: '';
  animation: flip 6s linear infinite;
}
@keyframes flip {
  from { content: 'Hello!'; }
  to { content: 'Goodbye!'; }
}

See the Pen Discretely Animated Text by Will Boyd (@lonekorean) on CodePen.

Если хотите анимировать счётчик чисел в content, есть один трюк, но он работает только в Safari, Chrome, Edge и Opera (именно эти браузеры в настоящее время поддерживают Properties and Values API, на который опирается этот трюк).

Вот как это работает.

1. Объявите пользовательское свойство, которое является целым числом.
2. Установите счётчик, который будет принимать значение этого целого числа через counter-reset.
3. Отобразите этот счётчик через свойство content псевдоэлемента.
4. Анимируйте значение целого числа.

@property --num {
  syntax: '<integer>';
  inherits: true;
  initial-value: 0;
}

div::before {
  counter-reset: my-counter var(--num);
  content: counter(my-counter);
  animation: count 10s ease-in-out infinite alternate;
}

@keyframes count {
  to { --num: 100; }
}

See the Pen Number Counter Animation by Will Boyd (@lonekorean) on CodePen.

Если хотите глубже познакомиться с этой техникой, то ознакомьтесь с этим руководством, в котором она рассматривается немного подробнее.

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

Кроме ::before и ::after существуют и другие псевдоэлементы, которые применяются для стилизации фрагментов имеющихся элементов. Ранее мы говорили о ::marker для стилизации маркеров пунктов списка. Другой пример — ::selection, который используется для стилизации выделенного текста.

Существуют также псевдоклассы, которые отличаются от псевдоэлементов. Псевдоклассы применяют стили, зависящие от состояния. Например, в предыдущем примере мы использовали :checked, чтобы применить стиль только в том случае, если флажок был отмечен.

Перед псевдоэлементами пишется двойное двоеточие (::), в то время как перед псевдоклассами пишется одинарное двоеточие (:). В старых версиях спецификации W3C для псевдоэлементов использовались одинарные двоеточия, поэтому иногда можно встретить :before и :after. Они по-прежнему работают, но вместо них рекомендуется использовать ::before и ::after.