Как задать border-bottom на всю ширину с overflow?

Question

[devfior]

https://codesandbox.io/s/draft-tab234-u2skdi?file=...
При прокрутке элемента серая нижняя обводка не доходит до конца элемента, а заканчивается посередине. Как я предполагаю, это потому что над ним есть обертка scroller, которая задает overflow. Но если overflow добавить на уровень с border-bottom, то это свойство будет перекрывать другие border-bottom (при active и hover).
Как сделать так, чтобы серая обводка элемента была на всю ширину при скролле?

Comments

[Ankhena]

Не вижу в песочнице нижнего бордера.

Но, наверное, вам сюда Почему грид контейнер использует неправильную шири...

Answer 1

[Виктор Майоров]

Я бы сделал как-то так.
https://codesandbox.io/s/draft-tab234-forked-dxwol...

Вместо того, чтобы пытаться сделать общий border-bottom, можно еще один псевдоэлемент добавить к пунктам меню (например before) и стилизовать его как единую линию (визуально).
Для этого нужно использовать не margin-right, а padding-right