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

您可以使用带有position: absolute的:after元素来实现此目的：

 * { 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>