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

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 >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 ></div>

I am open to any suggestions including changing the way I have the list items set up. Thank you in advance!

CodePudding user response：

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 >Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

CodePudding user response：

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 >Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>