Как сделать такой эффект?

Question

[Shiki00]

На сайте ниже при наведении на пункты меню появляется линия, которая рисуется слева направо. Изначально подумал, что можно дать li невидимый бордер в 1 пиксель, а при ховере сделать его видимым и удлинить, но погуглив понял, что нельзя ограничить длину бордера. Как это сделать?

Answer 1

[approximate solution]

https://codepen.io/P233/pen/EaGAl
Нужный Вам эффект на Link Hover 3

Вся суть заключается в том, что вы анимируете при наведении линию которая добавлена к ссылке через after. В дефолтном состоянии она у вас 0% ширины, при наведении - нужное число.

Comments

[Shiki00]

Большое спасибо