HTML5/CSS width and border - html

Question

I am creating an html5 file that is meant to be printed. One part of the printed output is a form to be manually filled out on the printed output. I want to create underlines under the blanks as is normal on such a form.
The example code at http://www.w3schools.com/cssref/tryit.asp?filename=trycss_dim_height allows me to define a width of a element, and apply a border-bottom css property to it. The output is a faux underline the width of the element, even if there is no text in the element.
The same code in both Safari and Chrome on OS X Yosemite does not show any bottom border.
Is there a way to generate an underline of a specified length?

Answer 1

make a custom tag element called 'sp' eg. <p>THIS IS A <sp/> SPACE</p>
CSS for the new 'sp' tag:
sp:before {
content: '\2003\2003\2003\2003\2003'; // '\2003' is the ISO code used in CSS for a 4 unit wide whitespace. Here I use 5 of them.
text-decoration:underline;
}
Add according to the width you need (example below):
sp:before {
content: '\2003\2003\2003\2003\2003';
text-decoration:underline;
}
<p>THIS IS A <sp/> SPACE</p>
<p>THIS IS A <sp/><sp/> SPACE</p>
<p>THIS IS A <sp/><sp/><sp/> SPACE</p>

Answer 2

Does something like this work for you?
.underline {
width: 100px;
border-bottom: 1px solid;
display: inline-block;
}
bla <span class="underline"></span> bla
However, instead of giving the underline a fixed width, I would suggest you adapt the width of the underlined area dynamically according to the container's width.

Answer 3

Set a width, ideally a percentage so it can adapt if the page size or layout changes. 100% if your container is doing layout, some other percent as appropriate. You can use inches (in), centimeters (cm), and so on, but you will need to test it. Just do not use pixels (px). Also, use pt for the border line as that is something a printer generally renders consistently.
#media print {
input[type=text] {
border-bottom: 1pt solid #000;
width: 50%; /* use a % value, or maybe in, but not px */
}
}
This only fires when the page is printed. It removes the border from any <input type="text">.
Since I misunderstood your question at first, I initially wrote CSS to underline only text that was already entered and to keep the width of the text. So I'll put that here anyway.
#media print {
input[type=text] {
border: none;
text-decoration: underline;
}
}
It underlines the text in the field, which takes its length from the width of the text anyway.
In both cases, no custom elements, no special classes, no script.
EDIT: I should have qualified, I come from a world where forms that are printed are usually backed by an on-screen form, so I started there.