Как реализовать подобное подчеркивание в меню?

Question

[mbhusty]

В макете есть меню, у которого отмечено активное состояние как

spoiler

Данную линию могу вытянуть как SVG, но как ее поставлять под элементы разной ширины?

Answer 1

[Maxim Nepritimov]

Воспользоваться псевдоэлементом before|after
Задать абсолютное позиционирование относительно родительского элемента, задать ширину 100% от родительской

Comments

[sergski]

и не забыть отключить сохранение пропорций в svg

[mbhusty]

sergski, можно подробнее?

[sergski]

anisimov, svg масштабируется пропорционально в заданных размерах. чтобы отключить в svg нужно добавить атрибут preserveAspectRatio="none"