Как правильнее сделать подобный hover эффект?

Question

[Кира]

Здравствуйте.
Пришла рассылка от HTML Academy, и в одном из шаблонов есть такой hover эффект для пунктов меню. Стало любопытно, как такое лучше всего сделать?
У меня только вариант вырезать этот элемент картинкой и добавить background-image при наведении.

Answer 1

[Shane Matte]

codepen.io/shanematte/pen/dMvNqB

Answer 2

[Антон Ратник]

Думаю, поможет Популярно о псевдоэлементах :Before и :After

Answer 3

[Максим Тимофеев]

Картинкой или cvg и через :after, как подсказал Антон. Абсолютное позиционирование у :after, relative у пункта меню. И все.

Answer 4

[dzenn]

Господи, дизайнеры, ну и зачем такие ховеры рисовать? Я сейчас просто ноутбук с балкона выкину

Comments

[Максим Тимофеев]

А чем конкретно такой ховер не нравится?