title: How to display a horizontal line before and after a heading in css
body: <p>I am trying to style a an html heading in css but am not getting the correct result as my jsfiddle shows: <a href="https://jsfiddle.net/Nadjanara/nmo0245t/" rel="noreferrer">https://jsfiddle.net/Nadjanara/nmo0245t/</a> .
  The following are the html and css codes:</p>
  
  <pre><code>&lt;h2&gt;&lt;span&gt;Heading2&lt;/span&gt;&lt;/h2&gt;
  
  h2{
    width:100%; 
    text-align:center; 
    border-bottom: 1px solid #000; 
    line-height:0.1em; margin:10px 0 20px; 
  } 
  h2 span{
    padding:0 10px; 
  }
  </code></pre>
  
  <p>How can I put the horizontal line only before and after the heading and also control the width of the line so that such doesn't occupy the full width of the screen?</p>