CSS中的圆帽下划线答案

【问题标题】：Round cap underline in CSSCSS中的圆帽下划线
【发布时间】：2013-06-06 12:13:14
【问题描述】：

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

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

【问题讨论】：

标签： border css underline

【解决方案1】：

没有。如果你想纯粹用 HTML+CSS 来做这件事，你需要一个辅助元素放在文本下方，然后对其应用曲率和背景颜色。或者，在我看来，值得畏惧的是，您可以使用图像。

【讨论】：

【解决方案2】：

编辑：我误解了 hpique wated，但这应该有效：

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

&lt;div id="test"&gt;Hello world&lt;/div&gt;

基本上我将文本放在一个 div 上，盒子阴影的大小将与该 div 的集合 height 和 width 相同，只需使用 height/width 和你应该得到你想要的......

JSBin Demo

演示截图：

【讨论】：

第二个例子是我不想要的。 :)
CSS 总有办法。 :)
我知道这很旧，但我想顺便将解决方案添加到您要求的这个线程中。是的，这是可能的，而且很容易。 I just edited the above JSBin.

【解决方案3】：

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

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

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

【讨论】：

【解决方案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。

【讨论】：

【解决方案5】：

您可以通过在文本下方使用 div 并将其边框半径设置为 2000 像素来实现。我认为这会更简单

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 片段：

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

【讨论】：

【解决方案6】：

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

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;
}

}

【讨论】：

与所有其他答案不同，此答案适用于任何标签。特别是内联标签。仅在 div 中有效的选项并不是真正的解决方案。谢谢@jennsuzhoy

【解决方案7】：

我刚刚学到的一个技巧是，不要使用div 边框，而是尝试在标题中添加一个:after 选择器，例如：

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

<!DOCTYPE html>

<html>
  <head>
  </head>
  <body>
    <h1>test</h1>
  </body>
</html>

【讨论】：