如何在border-bottom 属性中创建圆角线边框？答案

【问题标题】：How do I create a rounded line border in a border-bottom property?如何在border-bottom 属性中创建圆角线边框？
【发布时间】：2021-06-17 23:11:56
【问题描述】：

我正在尝试创建一个风格化的下划线，结果我假装它是这样的：

我想要达到的目标：

如您所见，我想要的边框在其末端是圆形的。但是到目前为止，我在这里使用了边框底部：

我的代码是这样的：

HTML

<nav class="navbar">
    <a id="index" href="#index">Home</a>
    <a href="#">Pokedéx</a>
    <a href="#">Legendaries</a>
    <a href="#">Documentation</a>
</nav>

和 CSS

.navbar > a {
    font-size: 1.5rem;
    margin: 0px 10px 0px 0px;
    text-decoration: none;
    color: #212121;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 400;
}

.navbar > a:target {
    border-bottom: 4px solid #212121;
}

所以我想知道是否有一种方法可以使边框框的边框（无论它们是底部、顶部、右侧、左侧，都无关紧要）变圆还是有更好的方法来设置此下划线的样式?你会怎么做？

非常感谢。

【问题讨论】：

border 无法做到这一点。请改用伪元素。 Edit line thickness of CSS 'underline' attribute
您要找的是stackoverflow.com/questions/17030664/round-cap-underline-in-css吗？
是的@BrownPaul，我认为还没有找到原因，事实上我不知道如何进行任务。非常感谢您的链接，我已经找到了我正在寻找的答案...

标签： html css

【解决方案1】：

我通常为此使用::after 伪元素

.navbar > a {
  position: relative; /* This is the reference for the after psuedo-element*/
  font-size: 1.5rem;
  margin: 0px 10px 0px 0px;
  text-decoration: none;
  color: #212121;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 400;
}

.navbar > a:target::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px; /* Negative height */
  width: 100%;
  height: 4px; /* Height of border */
  background-color: #212121;
  border-radius: 5rem; /* This can be any number but is normally set very high for the pill-shape */
}

<nav class="navbar">
  <a id="index" href="#index">Home</a>
  <a href="#">Pokedéx</a>
  <a href="#">Legendaries</a>
  <a href="#">Documentation</a>
</nav>

【讨论】：