19

在此处输入图像描述

你能用 CSS 做圆帽下划线（如上图）吗？如何？

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

在此处输入图像描述

4

7 回答 7

18

编辑：我误解了 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;
}
<div id="test">Hello world</div>

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

JSBin 演示

演示截图：

这应该是预期的......

于 2013-06-10T19:23:49.630 回答
7

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

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

在这里摆弄：https ://jsfiddle.net/toqL0agq/1/

于 2016-08-18T15:25:36.800 回答
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;
}

}

于 2019-07-25T14:23:40.793 回答
2

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>

于 2020-10-12T23:16:23.680 回答
1

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

于 2013-06-10T18:48:34.747 回答
0

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

我在伪元素上使用leftand right，这样两端就不会超出文本太远。

请参阅我的代码笔。

于 2016-08-30T22:27:38.997 回答
0

您可以通过在文本下方使用 div 并将其边框半径设置为 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;
}

查询片段：

var arbitrarynumber = 5
$('.underline').width($('.underline').parent().width()-arbitrarynumber)
于 2017-07-06T14:09:19.060 回答