CSS中的圆帽下划线

Question

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

有没有办法用border-bottom执行此操作？ border-radius产生了这种时尚效果：

Answer 1

编辑：我很想念hpique的所作所为，但这应该有效：

#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的大小相同，只需使用{{1} } / height你应该得到你想要的东西......

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

我刚学到的技巧之一不是使用5.0.100-rc.1.20452.10边框，而是尝试向标题添加div选择器，如：

:after

h1:after{
  content: " ";
  display: block;
  width: 1.5em;
  height: .2em;
  background-color: #f0860c;
  border-radius: 10px;
}

Answer 5

与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 6

你可以通过在文本下使用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)

Answer 7

我尝试用可接受的答案做同样的事情，但是发现我仍然得到问题中显示的不良结果。您可以通过psuedo类实现此目的：

HTML：

$from       = time();
$to         = time()+10;

$total      = $to - $from;
$hours      = floor($total / 60 / 60);
$minutes    = round(($total - ($hours * 60 * 60)) / 60);
$seconds    = round(($total - ($hours * 60 * 60)) % 60);

print $hours . ':' . $minutes . ':' . $seconds;

CSS：

<span class="kicker">Hello World</span>

}