title: Create a border/line that has a dynamic width based on text
body: <p>I'm trying to create some text headings that have a line out to the side that is dynamic based on the width of the text.</p>
  
  <p>Example:
  <img src="https://i.stack.imgur.com/30CK0.png" alt="enter image description here"></p>
  
  <p>I'm guessing I'll need to do some sort of background color on the heading (white, for instance) to sort of fake it, and then use a <code>:before</code> pseudo class, but so far I haven't been able to pull it off.</p>
  
  <p>The HTML (at least at the moment) is just a basic heading tag:</p>
  
  <p><code>&lt;h3&gt;This is some text&lt;/h3&gt;</code></p>
  
  <p>I'd really like to avoid adding additional HTML elements, if possible.</p>