Как запилить такой hover эффект без js?

Question

[MegaPuxapb]

riccardozanutta.com

Comments

[Сергей delphinpro]

На указанном сайте эффект реализован без javascript.
Почему бы вам тупо не стянуть код оттуда?

Answer 1

[Sanches]

Вот пример с разными цветами: https://codepen.io/abnmt/pen/RMompQ

Comments

[MegaPuxapb]

то что нужно)

Answer 2

[Vitaliy]

Линии сделать через :before/:after и назначить им transition и нулевой width
по :hover изменять width линий

Comments

[MegaPuxapb]

это всё понятно.
как сделать, что бы линии заезжали с лева, и уезжали в право?

[Vitaliy]

MegaPuxapb, в devtools смотрите

Answer 3

[ni_aeronaut]

https://codepen.io/aeronaut/pen/oqYzYj

Comments

[MegaPuxapb]

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