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

Question

[Dubrovin]

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

Comments

[Николай Чуприк]

Битая ссылка на codepen.

[Rustam Bainazarov]

Николай Чуприк, там просто точку и скобку в конце ссылки включил автор случайно.

Answer 1

[smilingcheater]

Можно попробовать сделать элемент инлайновым, задать подчёркивание через background и анимировать уже его.
Например так: https://codepen.io/smilingcheater/pen/KKwPKEX

Comments

[Dubrovin]

Да, спасибо, это работает, уже нашёл решение!