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