title: Custom underlines
body: <p>Does anyone know how it is possible to create custom underlines where the text goes onto two lines?</p>
  
  <p>At present I have the following:</p>
  
  <pre><code>&lt;h1 class="title" id="page-title"&gt;Title goes here&lt;/h1&gt;
  
  h1 {
  display: inline-block;
  zoom: 1;
  line-height: 1.4em;
  background-image: url(../img/underline.png);
  background-repeat: repeat-x;
  background-position: left bottom;
  }
  </code></pre>
  
  <p>Problem is when the line becomes longer and wraps, you get only one underline.</p>
  
  <p>See <a href="http://jsfiddle.net/2dqUc/" rel="nofollow">JSFiddle</a></p>
  
  <p>Looking for a solution that works back to IE8</p>