Как сделать простую анимацию border-bottom слева на права при фокусировке и наоборот?

Question

[JS_Junior]

p.s: так как код выполняется вроде бы, класс инпута "form_input"

Как сделать так что бы при фокусирование на input, мой border-bottom плавно выходил слева на права и в случае разфокусировке уходил справа на лево и как бы исчезал

Comments

[Ivan Ustûžanin]

не понял где код выполняется
но в общем идея: выкинуть border, и вместо него использовать background-image с соответствующими другими background-параметрами типа размера, позиции и т.п.

[Ankhena]

Либо псевдоэлемент и его размер или трансформ.
Либо градиентик на фоне.
Или типа того.

[JS_Junior]

IvanU7n, всмысле? как я смогу использовать картинку заднего фона вместо той самой полосочки снизу, можно было бы еще див поставить и форму полоски и тд и тп, ну картинку уже странно ставить хз как это тогда сделать

я наверное ща попробую с дивом это сделать

[JS_Junior]

IvanU7n, кстати через див у меня получилось сделать именно то что я хотел только что, не знаю почему не попробавал раньше...

[Ivan Ustûžanin]

JS_Junior, это ж классика, так что легко:
делаем background-image в виде linear-gradient() из, скажем, красного в красный
задаём ему background-size в 0% по X и 2px по Y
позиционируем его через background-position в 0% по X и 100% по Y
при нужном псевдоклассе через transition по background-size меняем ему размер по X на 100%, а размер по Y оставляем без изменений
готово

[Ankhena]

JS_Junior, портить разметку лишним div для этого не нужно, достаточно использовать псевдоэлемент.