Create border-bottom smaller than element and with thicker middle

Question

I'm using some stylized HRs to create section separators.

But now I'm trying to create a H1 element with a border bottom smaller than H1 width (variable width according to the width of the H1 text) and with a thicker middle (height).

Something like this:

I scoured several search sources trying to find a solution but found nothing like it.

I tried to use :after and :before but still stuck. Any idea?

What I've tried so far:

h1 {
  display:inline;
  border-bottom:1px solid black;
}

h1:after {
 content: '';
  display: block;
  width: 100%;
  height: 100%;
  border-bottom:3px solid red;
}

<h1>
My Text
</h1>

Answer 1

You can easily do such thing with linear-gradient with no need of extra markup or pseudo element:

h1 {
  display:inline-block;
  font-size:3em;
  padding-bottom:10px;
  background:
   linear-gradient(red 0 0) 50% calc(100% - 2px)/80% 2px,
   linear-gradient(red 0 0) 50% 100%            /40% 6px;
  background-repeat:no-repeat;
}

<h1>Lorem Ipsum</h1>