Задать вопрос
@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?
  • Вопрос задан
  • 285 просмотров
Подписаться 1 Средний 2 комментария
Помогут разобраться в теме Все курсы
  • Яндекс Практикум
    Профессиональная вёрстка на HTML и CSS
    3 месяца
    Далее
  • Stepik
    Основы HTML и CSS
    2 недели
    Далее
  • OTUS
    HTML/CSS
    3 месяца
    Далее
Решения вопроса 1
smilingcheater
@smilingcheater
Можно попробовать сделать элемент инлайновым, задать подчёркивание через background и анимировать уже его.
Например так: https://codepen.io/smilingcheater/pen/KKwPKEX
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы