如何将较小的 div 的 border-bottom 放在另一个较大的 div 的 border-bottom 之上？

Question

我只是在较大的 div (header) 中有 1 个较小的 div（导航菜单）。

而且我需要较小 div 的 border-bottom 与较大 div 的 border-bottom 高度相同。

我已附上图片：

have

want

.main-navigation-link .main-navigation-link-text {
  border-bottom: 6px solid #F18000;
  color: #F18000;
  padding-bottom: 7px;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}
.nav-main {
    border-bottom: 7px solid red;
}

<div class="nav-main fixed-header">              
  <div class="main-navigation" id="mainNavigation" data-flyout-menu="true">
    <div class="container">
    <nav class="nav main-navigation-menu">

        <a class="nav-link main-navigation-link">
            <div class="main-navigation-link-text">
                <span itemprop="name">Dönermesser</span>
            </div>
        </a>

    </nav>
    </div>
   </div>
</div>

JSFiddle

Answer 1

尝试在较小的 div margin-bottom: -5px; 上设置边距（或较大 div 的边框粗细值）

  .main-navigation-link .main-navigation-link-text {
    border-bottom: 6px solid #F18000;
    color: #F18000;
    padding-bottom: 6px;
    margin-bottom: -6px;
  }

  .nav {
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
  }
.nav-main {
    border-bottom: 6px solid red;
}

<div class="nav-main fixed-header"> 
  <div class="main-navigation" id="mainNavigation" data-flyout-menu="true">
    <div class="container">
      <nav class="nav main-navigation-menu">
        <a class="nav-link main-navigation-link">
            <div class="main-navigation-link-text">
                <span itemprop="name">Dönermesser</span>
            </div>
        </a>
      </nav>
    </div>
  </div>
</div>

Answer 2

您可以在带有文本的元素上使用 :after 元素。

.box {
  width: 100px; /* demo only */
  padding: 10px;
  text-align: center;
  border-bottom: 10px solid #ccc;
}

.content {
  position: relative;
  display: inline-block;
  color: orange;
}

.content:after {
  content: '';
  width: 100%;
  height: 3px;
  background: orange;
  display: block;
  position: absolute;
  bottom: -13px;
}

<div class="box">
  <div class="content">Dönermesser</div>
</div>

如何将较小的 div 的 border-bottom 放在另一个较大的 div 的 border-bottom 之上？

How can I put a smaller div's border-bottom on top of another bigger div's border-bottom?

html

css

border