изменить цвет части элемента в navbar

Question

У меня проблема. у меня есть панель навигации с кнопками, подобными этим:

, как вы видите, активная имеет синий фон, но я хочу сделать ее такой, когда она активна (обратите внимание, что нижняя часть кнопки тоже синего цвета):

как мне это сделать? вот мой код:

<li class="nav-item selectable"><button>جزوات</button></li>

я должен добавить промежуток или что-то? или это может быть сделано чистым css или js ??

большое спасибо

Answer 1

Я не пробовал, но как-то так должно работать

.nav-item {
position: relative;
}
.nav-item:after {
content: '';
display: block;
height: 10px;
width: 100%;
left: 0;
right: 0;
color: blue;
}