Анимированный бордер на css или js?

Когда верстал сайт ставил нижние границы на серый цвет и переход на 0.3s,при наведении (hover) менял границы на синий цвет. Дело в том что при наведении, анимация нижней-границы(синего цвета), появляется сверху вниз(то есть 'падает').

Сейчас клиент хочет, что бы граница появлялась слева направо, и что бы при наведении курсором на второй элемент списка, граница первого не пропадала, а как бы "догоняла" курсор и заполняла границу второго. Надеюсь смог понятно объяснить. Так вот в чем вопрос как я знаю это на css невозможно сделать,а на js я не знаю как,можете помочь что и как надо изменить, без jQuery или доп.фреймворков .