Строка после текста

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>