CSS中的圆帽下划线

Question

你能用CSS制作圆帽下划线（如上图所示）吗？怎么样？

有没有办法用border-bottom做到这一点？ border-radius产生这种时尚效果：

Answer 1

编辑：我误解了什么需要，但这应该工作：

#test {
  font-size: 50px;
  background: transparent;
  border-radius: 10px;
  height: 10px;
  width: 255px;
  box-shadow: 0 55px 0 0 #000;
  font-family: sans-serif;
}

<div id="test">Hello world</div>

基本上我把文字放在一个div上，并且盒子阴影将与该div的height和width设置相同，只需和height / width一起玩，你应该得到你想要的东西......

JSBin Demo

演示截图：

Answer 2

不。如果您想纯粹使用HTML + CSS执行此操作，则需要在文本下方放置辅助元素，然后将曲率和背景颜色应用于此。或者，在我看来，你可以使用一个图像。

Answer 3

是的，这是可能的。使用:after添加一个没有内容的块元素，并给它所需的宽度/高度，如下所示：

h1:after { 
  content:""; 
  float:left; 
  background:green; 
  width:100%; 
  height:6px; 
  border-radius: 3px;
}

在这里小提琴：https://jsfiddle.net/toqL0agq/1/

Answer 4

就像youtag的答案一样，我的解决方案使用伪元素 - 但我的下划线只运行文本的长度并且可以包裹多行（在每行文本下面都有一个下划线）。

基本上，我在元素之前和之后用伪元素圆圈手动限制元素边框的末端：

h1 a {
  text-decoration: none;
  position: relative;
  border-bottom: 15px solid;
  padding-bottom:3px;
}

  h1 a:hover, h1 a:focus {
  border-bottom: 15px solid #eb6d32;
}

h1 a:before, h1 a:after {
  content: '';
  height: 15px;
  width: 15px;
  background-color: currentColor;
  border-radius: 15px;
  position: relative;
  display: inline-block;
  vertical-align: text-bottom;
  margin-bottom: -18px;
}

h1 a:before {
  left: .2ex;
  margin-left: -.4ex;
}

h1 a:after {
  margin-right: -.4ex;
  right: .2ex;
}

我在伪元素上使用left和right，因此结尾不会超出文本太远。

看看我的codepen。

Answer 5

你可以通过在文本下使用div并将其border-radius设置为2000px来实现。我认为这会更简单

HTML：

<div class="wrapper">
    <span>Hell World</span>
    <div class="underline"></div>
</div>

CSS：

.underline{
    height:0px;border: 3px solid black;
    border-radius: 2000px;
}
.wrapper{
    display:inline-block;
}

JQUERY SNIPPET：

var arbitrarynumber = 5
$('.underline').width($('.underline').parent().width()-arbitrarynumber)