Переместить нижнюю границу дальше от текста ⇐ CSS

[Anonymous]

Я пытаюсь переместить нижнюю границу границы вниз, чтобы было видно больше моей активной ссылки.

Код: Выделить всё

.navigation a.active-link {
background-border: #red;
border-style: solid;
border-bottom: solid white;
color: black;
padding:10px;
}

#navigation {
border-bottom: 1px solid currentColor;
text-decoration: none;
word-wrap: break-word;
padding-top: 10px;
margin-bottom: 15px;
overflow: hidden !important;
white-space: no-wrap;
text-overflow: clip;
height: 26px;
}

Проблема в том, что когда я пытаюсь увеличить отступ снизу, мой текст складывается, и я пытаюсь этого избежать.
https://jsfiddle.net/akn5r7y5/2/