title: how to place a heading text with horizontal lines in left & right side in CSS
body: <p>I wanted a design like this ; 
  <img src="https://i.stack.imgur.com/YGSOX.png" alt="enter image description here"></p>
  
  <p>I wrote my css like this : </p>
  
   text here    
  
  <pre><code>.my-title:before,
  .my-title:after {
      background-color: #CCCCCC;
      content: "";
      display: inline-block;
      height: 2px;
      position: relative;
      vertical-align: middle;
      width: 32%;
      margin-left: -2%;
  }
  }
  </code></pre>
  
  <p>This seems correct in local, but becasue of the final  } brace it was giving error in production. 
  How to do it with simpler CSS, so that i can get the desired design ! </p>