How to underline blank space in CSS?
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.
What I am going for is...
Amount Paid: $ ___________________
So far, I have managed this CSS:
<div> <p style="border-bottom: 1px solid black;"> Amount Paid: $ </p> </div>
That draws a line to the edge of the parent
div - which I want. However, it also draws a line under "Amount Paid: $", which I don't want. Every combination of
spans, etc. I've thought of has failed:
If I put the text in a
span that nukes the border, it doesn't matter, I suppose since it's still part of the
p and the border is still drawn.
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
Likewise, if I replace the
p with a
span it doesn't get the memo that it should extend the border all the way:
<p> <span>Amount Paid: $ </span> <span style="border-bottom: 1px solid black;"> </span> </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
p with anything else like divs or spans, it doesn't seem to work either...
Any ideas? Thanks in advance.
display (CSS) of the second span to
inline-block and set its
Or try something like:
<p style="width: 200px; display: table;"> <span style="display: table-cell; width: 100px;">Amount Paid: $ </span> <span style="display: table-cell; border-bottom: 1px solid black;"></span> </p>