边框底部宽度调整

Question

我正在尝试更改边框底部的宽度。考虑一下，我可以使用背景颜色创建另一个div，但是在这种情况下，我们将不得不使用边框底。

有没有一种方法可以更改边框的宽度，同时保持中心与边框的对齐。

<nav>
  <a href="" class="selected">Link</a>
  <a href="">Link</a>
  <a href="">Link</a>
  <a href="">Link</a>
</nav>

nav {
  display: flex;
  justify-content: center;
  a {
    margin: 0px 20px;
    color: #000;
    text-decoration: none;
    font-size: 20px;
    text-transform: uppercase;
  }
  .selected {
    border-bottom: 1px solid #000;
  }
}

我可以更改链接的宽度，但不能保持边框的中心

希望在下面做类似的事情