html - 文本后一行

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>