html - 伪边界从父级溢出 : auto

Question

我正在尝试创建一个水平/可滚动的导航，每端都有渐变渐变。将父级设置为 overflow: auto 几乎解决了我的问题，但隐藏了我的 active link 边框，我将其绝对定位为 :before 伪上方父链接。我想知道是否有一种方法可以让我在让我的伪边界突破它的同时保持溢出？对于这个问题，梯度本身并不重要，但这种结构需要保持原样。

ul {
  margin: 0;
}

li {
  display: inline-block;
}

.vertical-title {
  height: 55px;
  margin-bottom: 13px;
  border-bottom: 3px solid #dceaec;
  font-size: 22px;
  line-height: 57px;
  color: #111;
  text-align: center;
  text-transform: uppercase;
}

.vertical-title-wrapper {
  padding: 0;
  z-index: 0;
  position: relative;
}

.hub-nav {
  display: block;
  padding: 0 15px;
  width: 100%;
  z-index: 1;
  white-space: nowrap;
  overflow: auto;
}

.hub-nav-link {
  position: relative;
}

.hub-nav-link.active-path:before {
  content: "";
  display: block;
  height: 3px;
  width: 100%;
  left: 0;
  position: absolute;
  top: -16px;
  background-color: #007eff;
}

<div class="hub-wrapper">
  <div class="vertical-title">
    <a href="/shopping">Page Title</a>
  </div>

  <nav class="hub-nav">
    <ul class="hub-nav-list">
      <li class="hub-nav-list-item">
        <a class="hub-nav-link active-path" href="">
          There's supposed to be a border above me!
        </a>
      </li>
    </ul>
  </nav>
</div>

<div>
  Content Below
</div>

Answer 1

负边距可以解决问题:

ul {
  margin: 0;
}

li {
  display: inline-block;
}

.vertical-title {
  height: 55px;
  margin-bottom: 13px;
  border-bottom: 3px solid #dceaec;
  font-size: 22px;
  line-height: 57px;
  color: #111;
  text-align: center;
  text-transform: uppercase;
}

.vertical-title-wrapper {
  padding: 0;
  z-index: 0;
  position: relative;
}

.hub-nav {
  display: block;
  padding: 0 15px;
  width: 100%;
  z-index: 1;
  white-space: nowrap;
  overflow: auto;
  padding-top: 16px;
  margin-top: -16px;
}

.hub-nav-link {
  position: relative;
}

.hub-nav-link.active-path:before {
  content: "";
  display: block;
  height: 3px;
  width: 100%;
  left: 0;
  position: absolute;
  top: -16px;
  background-color: #007eff;
}

<div class="hub-wrapper">
  <div class="vertical-title">
    <a href="/shopping">Page Title</a>
  </div>

  <nav class="hub-nav">
    <ul class="hub-nav-list">
      <li class="hub-nav-list-item">
        <a class="hub-nav-link active-path" href="">
          There's supposed to be a border above me!
        </a>
      </li>
    </ul>
  </nav>
</div>

<div>
  Content Below
</div>

这样您就不必寻找太久 - 我将这两行添加到您的代码段中:

.hub-nav {
    padding-top: 16px;
    margin-top: -16px;
}