Приветствую. На этот раз моё внимание привлёк сайт Gufram, а именно css анимация пунктов меню. Казалось бы всё довольно просто, но не совсем...
Анимация реализована с помощью псевдоэлемента ::after.
При наведении мыши - span скрывается вниз, а псевдоэлемент опускается на его место.
Пообщавшись с нейросетью, я пришёл к выводу, что span опускается вниз к примеру на 110% transform: translateY(110%), а псевдоэлемент встаёт на его место transform: translateY(0%).
Вот что пишет Deep Seek:
Спасибо за уточнение! Теперь я полностью понимаю вашу задачу. Давайте исправим код так, чтобы псевдоэлемент позиционировался корректно относительно родителя, а анимация работала именно так, как вы описали: основной текст уходит вниз, а псевдоэлемент занимает его место сверху.
Но в данном случае мы получаем не то, что нужно. Почему?
Нейросеть не учитывает, что когда основной элемент уходит вниз, то он "тянет" за собой псевдоэлемент.
Получается если span смещается вниз transform: translateY(110%), то псевдоэлемент transform: translateY(-110%).
Надеюсь было полезно.