HTML структура простая - каждая ссылка в отдельном блоке
Для плавного подчеркивания ссылок при наведении используем псевдоэлемент :after
1. Ссылке a назначаем position: relative;
2. Псевдоэлементу :after добавляем свойство position: absolute; bottom: 0; чтобы расположить его под текстом ссылки
3. Псевдоэлементу :after добавляем свойства content: ''; display: block; width: 100%; height: 15%; для отображения линии подчеркивания. Цвет задаем через background, например background: red;
4. Псевдоэлементу :after добавляем свойство transform: scaleX(0); чтобы изначально скрыть :after до наведения на ссылку. transform: scaleX(0); горизонтально сжимает элемент
5. Псевдоэлементу :after добавляем свойство transition: 0.6s ease; для плавного появления
6. При наведении на ссылку для :after назначаем transform: scaleX(1); - псевдоэлемент :after расжимается
При разных значениях transform-origin псевдоэлемент :after меняет координаты, от которых зависит направление плавного появления
В живую примеры можно посмотреть на Codepen
В примере ниже для цвета ссылки и подчеркивания использую CSS переменные
CSS стили для всех ссылок
Это только один из вариантов оформления ссылок. Если будет интересна эта тема, продолжим делать другие эффекты применяя различные техники
---
Друзья, стараюсь для вас, поддержите проект!
Подписывайтесь, впереди много всего интересного и полезного ;)
Telegram - https://t.me/frontips
