Complex decorative heading with two distinct borders



  • 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?



  • 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>




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2