@Dubrovin

Можно ли анимировать длину border-bottom у inline элемента?

Хочу сделать эффект подчёркивания у ссылок, чтобы при наведении линия подчёркивания появлялась от ширины 0% до ширины 100% под элементом (https://codepen.io/martinwolf/pen/eNNdme).
Это легко реализовать через before/after с display: block и transition: width. Но в таком случае, если текст ссылки будет переноситься на другую строку, то before не отрисуется браузером.
В случае же, если у ссылки задано простое свойство border-bottom, то даже при переносе строки border-bottom отрисуется так, как нужно (из-за display:inline у ссылки).
Вопрос, можно ли как-нибудь анимировать длину border-bottom?
  • Вопрос задан
  • 257 просмотров
Решения вопроса 1
smilingcheater
@smilingcheater
Можно попробовать сделать элемент инлайновым, задать подчёркивание через background и анимировать уже его.
Например так: https://codepen.io/smilingcheater/pen/KKwPKEX
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы