CSS中的圆帽下划线

Question

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

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

Answer 1

编辑:我想知道什么是hpique wated,但这应该工作:

HTML:

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

CSS:

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

基本上我把文字放在一个div上,并且盒子阴影的大小与该组相同height,width对于那个div,只需和height/ 一起玩就width可以得到你想要的东西......

JSBin演示

演示截图:

Answer 2

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

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

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

Answer 3

我尝试用已接受的答案做同样的事情，但发现我仍然得到问题中显示的不需要的结果。您可以使用伪类来实现此目的：

HTML：

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

CSS：

.kicker {
font-size: 1rem;
position: relative;

&:after {
    content: '';
    display: block;
    width: 100%;
    height: 6px;
    border-radius: 6px;
    background: #000;
    position: absolute;
    bottom: 0;
    left: 0;
}

}