使边框底部或下划线延伸到文本之上

Question

我试图弄清楚如何扩展这个元素的边框底部，使其与模型相匹配，但我似乎做不到。它只真正位于文本部分下方。

我怎样才能让它延伸到整个框/下划线导航栏的一半？

它应该是这样的： ()

这是 HTML：

<nav class="nav">
            <ul class="nav__list">
                <li class="nav__item nav__logo"><img src="./assets/logo/Logo-bandsite.svg"></li>
                <li class="nav__item nav__links">
                        <a class="nav__link nav__link--bio" href="./index.html">Biography</a>
                        <a class="nav__link nav__link--shows" href="">Shows</a>
                </li>
            </ul>
        </nav>

和 scss：

.nav {
            &__list {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 5rem;
            padding-top: 1.3rem;
        }

            &__logo {
                padding-bottom: 1.2rem;
            }

            &__links {
                width: 100%;
                display: flex;
                justify-content: space-around;
            }

            &__link--bio {
                font-weight: $bold;
                box-sizing: border-box;
                padding-bottom: 1rem;
                border-bottom: 3px solid $primary-white;
                border-width: 100%;
                display: block;
            }
}

这就是我得到的： ()

我也尝试将 放在 div 中并在其上做边框，但它给了我相同的结果。 预先感谢。

Answer 1

添加此 CSS 规则：

.nav__links > * {
  width: 50%;
  text-align: center;
}

它将加宽链接的宽度 - 从而加宽其底部边框！ – 父元素的 50%：

body {
  background: #555;
}

.nav__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 5rem;
  padding-top: 1.3rem;
}

.nav__logo {
  padding-bottom: 1.2rem;
}

.nav__links {
  width: 100%;
  display: flex;
  justify-content: space-around;
}

.nav__links>* {
  width: 50%;
  text-align: center;
}

.nav__link--bio {
  font-weight: bold;
  box-sizing: border-box;
  padding-bottom: 1rem;
  border-bottom: 3px solid white;
  border-width: 100%;
  display: block;
}

<nav class="nav">
  <ul class="nav__list">
    <li class="nav__item nav__logo"><img src="./assets/logo/Logo-bandsite.svg"></li>
    <li class="nav__item nav__links">
      <a class="nav__link nav__link--bio" href="./index.html">Biography</a>
      <a class="nav__link nav__link--shows" href="">Shows</a>
    </li>
  </ul>
</nav>