How can I get space between my item and the items underline? - html

Question

I have a list and one of the items of my list will be the active item. When the item has the active class I would like it to be underlined.
The problem I am running into is that because my item has a background color and padding to give it height, my underline is right under the block. I would like a space between the item and its underline like demonstrated below but I need the underline to be controlled via the active class not just slapped under the block the way I have in the example below.
ul {
display: flex;
justify-content: space-between;
}
li {
list-style-type: none;
width: 18%;
background-color: red;
display: flex;
justify-content: center;
padding: 2em 0;
color: white
}
li.active {
border-bottom: 4px solid blue;
}
.underline {
width: 17%;
background-color: blue;
height: 4px;
margin-left: 40px;
}
<h2>What I have</h2>
<ul>
<li class="active">Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
<h2>What I want</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
<div class="underline"></div>
I am open to any suggestions including changing the way I have the list items set up. Thank you in advance!

Answer 1

You can use a pseudo element but here is another idea using outline and clip-path:
ul {
display: flex;
justify-content: space-between;
}
li {
list-style-type: none;
width: 18%;
background-color: red;
display: flex;
justify-content: center;
padding: 2em 0;
color: white
}
li.active {
outline: 4px solid blue; /* the border configuration */
outline-offset: 15px; /* the offset */
clip-path: inset(0 0 -40px); /* a big negative value (at least bigger than the offset) */
}
<h2>What I have</h2>
<ul>
<li class="active">Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>

Answer 2

you can use pseudo element:
ul {
display: flex;
justify-content: space-between;
}
li {
list-style-type: none;
width: 18%;
background-color: red;
display: flex;
justify-content: center;
padding: 2em 0;
color: white;
margin-bottom: 16px;
}
li.active {
position: relative;
}
li.active:after {
content: "";
position: absolute;
width: 100%;
height: 4px;
background: blue;
bottom: -16px;
left: 0;
}
<h2>What you want:</h2>
<ul>
<li class="active">Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>