html - 有没有办法绕过边界底部的四肢？

Question

我想知道是否有办法使边框底部变圆。

像这样：

我知道我可以创建一个元素，添加一个高度、宽度、bg 颜色并用边框半径对其进行四舍五入，实际上，这就是我在这张图片中所做的，这是一个span. 但我想知道是否可以使用border-bottom.

我看了很多，但我找不到答案。事实上，我几乎可以肯定没有办法做到这一点，但如果有，那就太好了。

标签： htmlcss

Answer 1

是的，可以使用pseudo-element.

h1 {
  text-align: center;
}

h1>span {
  position: relative;
  border-bottom: 1px solid black;
}

h1>span::before {
  position: absolute;
  content: "";
  width: 60%;
  height: 3px;
  border-radius: 15px;
  background-color: greenyellow;
  bottom: -2px;
  left: 50%;
  transform: translate(-50%);
}

<h1> <span>Hello World</span> </h1>

了解有关伪元素的更多信息