文字后一行

Question

我正在尝试创建类似这样的东西：

到目前为止，我已经做到了：

h2:after {
  content: "";
  display: inline-block;
  height: 0.5em;
  vertical-align: bottom;
  width: 48px;
  margin-right: -100%;
  margin-left: 10px;
  border-bottom: 1px solid black;
  border-left: 1px solid red;
  border-right: 1px solid red;
}

<h2>html</h2>

有人可以帮助我吗？

Answer 1

您可以尝试这样：

h2 {
  display: inline-block;
}

h2:after {
  content: "";
  display: inline-block;
  height: 0.7em;
  width: 48px;
  margin-left: 10px;
  border-left: 4px solid red;
  border-right: 4px solid red;
  background:linear-gradient(#000,#000) center/100% 4px no-repeat;
}

<h2>html</h2>

如果您想将红色四舍五入，可以尝试如下操作：

h2 {
  display: inline-block;
  position:relative;
  padding-right:50px;
  background:linear-gradient(#000,#000) center right/ 30px 4px no-repeat;
}

h2:before,
h2:after{
  content: "";
  position:absolute;
  right:0;
  top:5px;
  height: 0.7em;
  width: 4px;
  background:red;
  border-radius:35%;
}
h2:after {
  right: 30px;
}

<h2>html</h2>

更新

如果要在文本下显示，则只能依靠背景：

h2 {
  display: inline-block;
  padding:0 8px 8px;
  background:
    linear-gradient(red,red)   bottom right/4px 15px,
    linear-gradient(red,red)   bottom left /4px 15px, 
    linear-gradient(#000,#000) 0 calc(100% - 5px)/100% 4px;
  background-repeat:no-repeat;
}

<h2>html</h2>

，半径如下：

h2 {
  display: inline-block;
  position:relative;
  padding:0 8px 8px;
  background:linear-gradient(#000,#000) 0 calc(100% - 5px)/100% 4px no-repeat;
}

h2:before,
h2:after{
  content: "";
  position:absolute;
  right:0;
  bottom:0;
  height: 0.7em;
  width: 4px;
  background:red;
  border-radius:35%;
}
h2:after {
  left: 0;
  right:auto;
}

<h2>html</h2>