title: How to underline blank space in CSS?
body: <p>I am making a report that should be printable from the web browser. At the bottom is a field for the recipient to fill in, so it's underlined. I would rather not have to eyeball a certain number of underscores, and they seem to have gaps in them anyway.</p>
  
  <p>What I am going for is...</p>
  
  <p>Amount Paid: $ <strong><em>_</em>__<em>_</em>__<em>_</em>__<em>_</em>__<em>_</em>__<em>_</em>___</strong></p>
  
  <p>So far, I have managed this CSS:</p>
  
  <pre><code>&lt;div&gt;
      &lt;p style="border-bottom: 1px solid black;"&gt;
          Amount Paid: $ 
      &lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>That draws a line to the edge of the parent <code>div</code> - which I want. However, it also draws a line under "Amount Paid: $", which I don't want. Every combination of <code>p</code>s, <code>span</code>s, etc. I've thought of has failed:</p>
  
  <p>If I put the text in a <code>span</code> that nukes the border, it doesn't matter, I suppose since it's still part of the <code>p</code> and the border is still drawn.</p>
  
  <p>I can add the underline to a span after text, but that doesn't work. It only seems to want to underline the blank space when the border style is in the <code>p</code> element.</p>
  
  <p>Likewise, if I replace the <code>p</code> with a <code>span</code> it doesn't get the memo that it should extend the border all the way:</p>
  
  <pre><code>&lt;p&gt;
      &lt;span&gt;Amount Paid: $ &lt;/span&gt;
      &lt;span style="border-bottom: 1px solid black;"&gt; &lt;/span&gt;
  &lt;/p&gt;
  </code></pre>
  
  <p>Does nothing. The line is never drawn. If I add a letter to the second span, it's drawn under that, but no more.  And if I replace the <code>p</code> with anything else like divs or spans, it doesn't seem to work either...</p>
  
  <p>Any ideas? Thanks in advance.</p>