title: Getting background to be same width as text, but different height
body: <p>I am trying to get a certain look in pure css (no images).</p>
  
  <p>What I have is:</p>
  
  <pre><code>&lt;h2&gt;
      &lt;a&gt;TITLE&lt;/a&gt;
  &lt;/h2&gt;
  </code></pre>
  
  <p>I would like for the text "title" to have a black background that is the same width as the text, but a different height.</p>
  
  <p>I have tried this is various permutations: (ie. span in the link, span in the h2, h2 display inline and the span a block)</p>
  
  <pre><code>&lt;h2 class="title section-title"&gt;
      &lt;a href="&lt;?php echo site_url(); ?&gt;/artwork/illustrations" &gt;
          Illustrations&lt;span class="title-bg"&gt;&lt;/span&gt;
      &lt;/a&gt;
  &lt;/h2&gt;
  </code></pre>
  
  <p>If I get the width right, I can't change the height because the span is an inline element. If I get the height right by making the span a block, I can't change get the width to be exactly the width of the text because it is now a block level element and expands to be the entire width of the page.</p>
  
  <p>Any ideas, or will I simply have to use an image?</p>