如何在我的项目和下划线项目之间获得空间?

Question

我有一个列表，列表中的一个项目将是活动项目。当项目具有活动类时，我希望它被加下划线。

我遇到的问题是，因为我的项目有一个背景色和填充来给它的高度，我的下划线在块的正下方。我想在项目和它的下划线之间有一个空格，就像下面演示的那样，但是我需要通过active类控制下划线，而不是像下面的例子那样在块下面。

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>

我愿意接受任何建议，包括改变我设置列表项的方式。提前感谢!

Answer 1

你可以使用一个伪元素，但这里有另一个想法使用outline和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

你可以使用

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>