Не только лишь все знают, что в content у псевдоэлементов можно использовать переменные. Это позволяет удобно помечать, например, уведомления. Или те же бейджики на карточках.
Но ведь, как мы уже. недавно выяснили, анимировать можно вообще что угодно!
Потому... разбиваем строку на span-ы и в каждом с помощью ключевых кадров меняем переменные, отвечающие за контент:
button:hover span:after {
animation: flip 0.2s calc(var(--i) * 0.05s);
}
@keyframes flip {
20% { content: '_'; }
40% { content: var(--c1); }
60% { content: var(--c2); }
}
Вуаля, вы великолепны!
Естественно, символы надо определить заранее:
<span
style="--i: 0; --c1: 'x'; --c2: '$'; --c3: '≈';"
>C</span>
The Matrix has you.
А, ну и ссылочка на кодпен: https://codepen.io/jh3y/pen/GRLKMPY
#css #var #flip #бородач