如何让border-bottom/下划线超出文本范围匹配导航栏设计稿？

你的核心问题是当前链接的border-bottom仅随文本宽度显示，无法铺满对应容器。这是因为a标签默认是行内元素，即便设置display:block，在justify-content: space-around的flex容器中，它的宽度仍由文本内容决定，且你使用的border-width: 100%是无效属性（border-width用于设置边框粗细，而非长度）。

解决方案一：让链接平分导航栏宽度（推荐） #

通过调整flex布局，让两个导航链接平分父容器的宽度，这样下划线就能自然铺满链接的宽度（即导航栏的一半）：

修改你的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 {
    flex: 1; /* 让每个链接平分父容器宽度 */
    text-align: center; /* 文本居中，匹配设计稿样式 */
    padding-bottom: 1rem;
  }

  &__link--bio {
    font-weight: $bold;
    border-bottom: 3px solid $primary-white;
    /* 移除无效的border-width: 100% */
  }
}

解决方案二：使用伪元素自定义下划线宽度 #

如果不想改变链接的宽度布局，可通过伪元素::after来创建一个独立的下划线，自由控制其宽度：

.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;
    padding-bottom: 1rem;
    position: relative; /* 为伪元素提供定位基准 */
  }

  &__link--bio::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%); /* 让下划线居中 */
    width: 50vw; /* 或设置为你需要的固定/相对宽度，比如50%以匹配导航栏一半 */
    height: 3px;
    background-color: $primary-white;
  }
}

效果说明 #

方案一的效果更贴合设计稿：两个链接各占导航栏的50%宽度，下划线铺满整个链接区域，同时文本居中对齐，完全匹配你预期的样式。

内容的提问来源于stack exchange，提问作者user24410818