Как сделать так, что бы цвет нижнего подчёркивания input при клике менялся c середины?

Question

[cuba_58]

Есть сайт - https://demos.creative-tim.com/material-kit/index.html
Вопрос:
Как сделать так же, что бы при клике на input нижнее граница меняла цвет
именно с середины и в разные стороны?

Если вопрос через чур прост, то не судите строго. Только начинаю)

Answer 1

[Ankhena]

Открываете инструменты разработчика (ctrl + shift + i или F12) тыкаете в нужный элемент и смотрите что у него там в стилях в свободном состоянии и при фокусе.

А там: фон градиентом и у него меняется размер при фокусе
https://jsfiddle.net/vew59xcs/

Answer 2

[Дмитрий Гормаш]

https://jsfiddle.net/b6r4tv5o/

Answer 3

[Дмитрий]

Пример