Complex decorative heading with two distinct borders

[Demir]

What solution can you propose to create such a title?

As you can see, the left lane doesn't appear. border-lefti.e. its length (previously height) is not equal to the true height of the unit.

I myself tried to paint a left strip by hand, i.e., in the form of a backbone with styles and positioning, but I don't like that decision very much because it's completely out of adaptiveness. Anything else possible?

[amarantha]

In such cases, pseudonyms are traditionally used ::before and ::after'cause they're saving you on the trash.

In fact, one strip of rice is a Border, the other is a pseudo element. I think the choice is arbitrary. I didn't notice it caused any problems on narrow screens. (If I misunderstood your mission, you don't have a multidimensional example.)

h1 {
  position: relative;
  padding: 3px 5px;
  border-left: 3px #666 solid;
}
h1::after {
  content: " ";
  display: block; position: absolute;
  left: -3px; right: 0; bottom: -5px; height: 2px;
  background: #888;
}

<section>
  <h1>Hello world!</h1>
</section>
<section style="width: 6em">
  <h1>Hello world!</h1>
</section>