是否可以在父 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：

* {

  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>