Как сделать анимированную полоску с помощью псевдо-элементов?

Хочу сделать, что бы при наведении на блок, снизу него от середины и в стороны выезжала полоска.

Объясню ниже, смотрите пример: https://jsfiddle.net/ccopdwvh/

Создал псевдо-элемент поставил его на середину, так что бы его видно не было, и при на ведении через trnansition растянул его по родительскому элементу, и поменял цвет. Проблема в том что не работает плавная анимация, мне нужно что бы полоска от середины, плавно выехала к краям.
Думал еще поставить псевдо-эл. на середину, дать ему width:0; margin:0 auto; а при наведении width:100%; но это тоже не работает.