What solution can you suggest for creating such a header?

As you can see, the left bar is not border-left , border-left its length (or rather, its height) is not equal to the true height of the block.

I myself tried to “draw” the left strip manually, that is, in the form of a single block with styles and positioning, but I don’t really like this solution because I’m completely devoid of adaptability (in mobile versions, the headings may not fit in one line). Anything else possible?

    1 answer 1

    In such cases, the pseudo-elements ::before and ::after are traditionally used because they allow saving on garbage in markup.

    Actually, we draw one strip by a border, the other by a pseudo-element. In my opinion, the choice is arbitrary. I did not notice that this caused any problems on narrow screens. (Or I misunderstood your task - you have a multi-line example missing.)

     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>

    • Thank you for the answer, a wonderful decision! - Bokov Gleb