title: Create Horizontal Separator with centered text in front of gradient background
body: <p>I want to create horizontal separator with text in center and in front of gradient background. How to make square blue that contain the text become transparent and comply with gradient background?</p>
  
  <p>here's the code
  css:</p>
  
  <pre><code>.hr-text {
      line-height: 1em;
      position: relative;
      outline: 0;
      border: 0;
      color: #000;
      text-align: center;
      height: 1.5em;
      opacity: .5;
  }
  .hr-text:after {
      content: attr(data-content);
      position: relative;
      display: inline-block;
      color: #000;
      padding: 0 .5em;
      line-height: 1.5em;
      color: #fff;
      background-color: #012533;
  }
  .hr-text:before {
      content: "";
      background: linear-gradient(90deg,transparent,#fff,transparent);
      position: absolute;
      left: 0;
      top: 50%;
      width: 100%;
      height: 2px;
  }
  </code></pre>
  
  <p>Html</p>
  
  <pre><code>&lt;hr class="hr-text" data-content="OR"&gt;
  </code></pre>
  
  <p>preview:</p>
  
  <p><a href="https://i.stack.imgur.com/GjwpC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GjwpC.png" alt="text with blue square"></a></p>
  
  <p><a href="https://jsfiddle.net/dtxyzhxL/" rel="nofollow noreferrer">https://jsfiddle.net/dtxyzhxL/</a></p>