Line after text

Question

I'm trying to create something like this:

So far I've done this:

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>

Can anybody help me?

Answer 1

You can try like this:

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>

If you want the red to be rounded you can try like this:

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>

Update

if you want it under the text you can rely on only background:

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>

and with radius like this:

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>