HTML: One-element crossed heading

heading-crossed.html

<!--

  One-element way of doing this kind of headings:

  ---------------- Text here ----------------

  * One HTML tag only
  * Background-independant
  * Properly centered horizontally and vertically
  * Same browsers support as for flexbox

-->

<style>
  .heading {
    display: flex;
    align-items: center;
  }
  
  .heading:before,
  .heading:after {
    content: '';
    flex: 1;
    background-color: #ccc;
    height: 1px;
  }
  
  .heading:before {
     margin-right: 1rem;
  }
  
  .heading:after {
    margin-left: 1rem;
  }
</style>

<h3 class="heading">Lorem ipsum</h3>