Можно ли отобразить нижнюю границу дочернего элемента родительского элемента div?

Question

Я немного растерялся и перепробовал все, что смог. При поиске переполнения стека я не смог найти подобную проблему. Итак, немного фона, я пытаюсь создать меню навигации с flexbox, как на картинке внизу, но я не могу отобразить нижнюю границу ссылки из родительского элемента div. Это вообще возможно?

Это то, что я хочу

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.wrap {
  max-width: 1170px;
  padding: 0 15px;
  margin: 0 auto;
}

.header {
  background: #44433e;
}

.header__menu {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}

.header__logo {
  padding: 10px 0;
}

.menu__list {
  display: flex;
  list-style: none;
  align-items: center;
}

.menu__item {
  margin-left: 15px;
}

.menu__item:first-child {
  margin-left: 0;
  border-bottom: 3px solid #18cfab;
}

.menu__link {
  display: inline-block;
  font-family: "Montserrat-bold";
  color: #b8b8b8;
  font-size: 13px;
  line-height: 42px;
  text-decoration: none;
  text-transform: uppercase;
}

.menu__link-active {
  color: #18cfab;
  
}

<header class="header">
      <div class="header__wrap wrap">
        <nav class="header__menu menu">
          <div class="header__logo">
            Logo
          </div>
          <ul class="menu__list">
            <li class="menu__item"><a href="#" class="menu__link menu__link-active">home</a></li>
            <li class="menu__item"><a href="#" class="menu__link">about</a></li>
            <li class="menu__item"><a href="#" class="menu__link">skills</a></li>
            <li class="menu__item"><a href="#" class="menu__link">service</a></li>
            <li class="menu__item"><a href="#" class="menu__link">work</a></li>
        </nav>
      </div>
    </header>

Answer 1

Этого можно добиться, используя элемент :after с position: absolute:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.wrap {
  max-width: 1170px;
  padding: 0 15px;
  margin: 0 auto;
}

.header {
  background: #44433e;
}

.header__menu {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}

.header__logo {
  padding: 10px 0;
}

.menu__list {
  display: flex;
  list-style: none;
  align-items: center;
}

.menu__item {
  margin-left: 15px;
  position: relative;
}

.menu__item:first-child {
  margin-left: 0;
}

.menu__item:first-child:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #18cfab;
}

.menu__link {
  display: inline-block;
  font-family: "Montserrat-bold";
  color: #b8b8b8;
  font-size: 13px;
  line-height: 42px;
  text-decoration: none;
  text-transform: uppercase;
}

.menu__link-active {
  color: #18cfab;
}

<header class="header">
  <div class="header__wrap wrap">
    <nav class="header__menu menu">
      <div class="header__logo">
        Logo
      </div>
      <ul class="menu__list">
        <li class="menu__item"><a href="#" class="menu__link menu__link-active">home</a></li>
        <li class="menu__item"><a href="#" class="menu__link">about</a></li>
        <li class="menu__item"><a href="#" class="menu__link">skills</a></li>
        <li class="menu__item"><a href="#" class="menu__link">service</a></li>
        <li class="menu__item"><a href="#" class="menu__link">work</a></li>
    </nav>
  </div>
</header>