title: Add a line next to a header with CSS
body: <p>Is there a way to display a line next to a header using CSS? Here's an image of what I'm talking about:</p>
  
  <p><img src="https://i.imgur.com/uUUwArT.png" /></p>
  
  <p><strike>I could do it with a static background image, but that'd require custom CSS for every heading. And I could do some hacky stuff using <code>:after</code> and background colors on the <code>h1</code>, but it wouldn't look right against a gradient background.</strike></p>
  
  <p>I'd like to do this with CSS, not JavaScript. If it doesn't work in older browsers, that's fine.</p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>In the past I've done something like this:</p>
  
  <p><code>&lt;h1&gt;&lt;span&gt;Example Text&lt;/span&gt;&lt;/h1&gt;</code></p>
  
  <pre><code>h1 {background-image:url("line.png");}
  h1 span {background-color:#FFF;dislpay:inline-block;padding-right:10px}
  </code></pre>
  
  <p>While that works, it's hacky, and it doesn't work well with gradient backgrounds, because the <code>span</code> has to have a solid background color. </p>
  
  <p>What I'm really looking for is something like this:</p>
  
  <p><code>&lt;h1&gt;Example Text&lt;/h1&gt;</code>
  <code>h1 {background-image:url("line.png");} /* but don't appear under the example text */</code></p>
  
  <p>I misspoke about the <code>:after</code> thing in the original post, I was thinking of another issue I had in the past.</p>