title: CSS heading while using line-height to shift border?
body: <p>I'm using the following CSS:</p>
  
  <pre><code>h2 {
      font-weight: normal;
      border-bottom: 1px solid #DDD;
      font-size: 1.6em;
      font-style: italic;
  }
  
  h2 span {
      position: absolute;
      top: 7px;
      padding-right: 6px;
      background-color: #F9F9EE;
  }
  </code></pre>
  
  <p>When used like:</p>
  
  <pre><code>&lt;h2&gt;&lt;span&gt;abc&lt;/span&gt;&lt;/h2&gt;
  </code></pre>
  
  <p>Gives the following effect:</p>
  
  <pre><code>abc ------------------
  </code></pre>
  
  <p>The text 'abc' is the heading content while the dashed line is the border being shifted. The following approach works well so long as you only use it once on the page. My question is, how can I achievement the same effect without using absolute positioning or even perhaps line-height since I suspect either or both are the culprits.</p>
  
  <p>I do remember seeing the same effect being used on a few blogs but the url slips my mind.</p>
  
  <p>Thank you. :)</p>