是否可以在父 div 之外显示子 border-bottom？

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：* {&nbsp; margin: 0;&nbsp; padding: 0;&nbsp; box-sizing: border-box;}.wrap {&nbsp; max-width: 1170px;&nbsp; padding: 0 15px;&nbsp; margin: 0 auto;}.header {&nbsp; background: #44433e;}.header__menu {&nbsp; display: flex;&nbsp; justify-content: space-between;&nbsp; align-items: stretch;}.header__logo {&nbsp; padding: 10px 0;}.menu__list {&nbsp; display: flex;&nbsp; list-style: none;&nbsp; align-items: center;}.menu__item {&nbsp; margin-left: 15px;&nbsp; position: relative;}.menu__item:first-child {&nbsp; margin-left: 0;}.menu__item:first-child:after {&nbsp; content: "";&nbsp; position: absolute;&nbsp; top: 100%;&nbsp; left: 0;&nbsp; width: 100%;&nbsp; height: 3px;&nbsp; background-color: #18cfab;}.menu__link {&nbsp; display: inline-block;&nbsp; font-family: "Montserrat-bold";&nbsp; color: #b8b8b8;&nbsp; font-size: 13px;&nbsp; line-height: 42px;&nbsp; text-decoration: none;&nbsp; text-transform: uppercase;}.menu__link-active {&nbsp; color: #18cfab;}<header class="header">&nbsp; <div class="header__wrap wrap">&nbsp; &nbsp; <nav class="header__menu menu">&nbsp; &nbsp; &nbsp; <div class="header__logo">&nbsp; &nbsp; &nbsp; &nbsp; Logo&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <ul class="menu__list">&nbsp; &nbsp; &nbsp; &nbsp; <li class="menu__item"><a href="#" class="menu__link menu__link-active">home</a></li>&nbsp; &nbsp; &nbsp; &nbsp; <li class="menu__item"><a href="#" class="menu__link">about</a></li>&nbsp; &nbsp; &nbsp; &nbsp; <li class="menu__item"><a href="#" class="menu__link">skills</a></li>&nbsp; &nbsp; &nbsp; &nbsp; <li class="menu__item"><a href="#" class="menu__link">service</a></li>&nbsp; &nbsp; &nbsp; &nbsp; <li class="menu__item"><a href="#" class="menu__link">work</a></li>&nbsp; &nbsp; </nav>&nbsp; </div></header>