title: Horizontal rule/line beneath each <h1> heading in CSS
body: <p>I am trying to place a 100% horizontal line (rule) automatically beneath every instance of an</p>
  
  <pre><code> &lt;h1&gt;
  </code></pre>
  
  <p>header tag using CSS.</p>
  
  <p>Example of what I'd like to see:</p>
  
  <p>--- snip 8&lt; ---</p>
  
  <p>Introduction</p>
  
  <hr>
  
  <p>--- snip 8&lt; ---</p>
  
  <p>I have this in my CSS:</p>
  
  <pre><code>.mypage .headline {
      font-family: Calibri, "Helvetica", san-serif;
      line-height: 1.5em;
      color: black;
      font-size: 20px;
  }
  </code></pre>
  
  <p>And I have this in my main HTML page:</p>
  
  <pre><code>&lt;body class="mypage"&gt;
  &lt;h1&gt;&lt;span class="headline"&gt;Introduction&lt;/span&gt;&lt;/h1&gt;
  </code></pre>
  
  <p>I cannot figure out how to have a horizontal line appear beneath every use of the headline class.</p>