css - expand width to fill-in for "float:right;" on element:after

Question

I have a minimal-syntax XML that I'm styling with CSS and I'd like to be able to have a varied-width 'underline' or a single visible border-bottom for a text field element.

The visual I am trying to create is only a preview of the actual document. The XML seen here gets 'compiled' into a different format with more data; the goal is to create a stylesheet that works with this 'untranslated' format so that the editor can offer a preview without actually building the end product. It does not need to be interactive.

At present the actual XML just looks like this:

<textfield>Nature of the question/data needed</textfield>

Very minimal! Before anyone suggests wrapping/adding elements, I'm not able to - this is the syntax!

I have tried to use the :after pseudo-selector to float the element after adding content:"."; color:rgba(0,0,0,0); but this didn't seem to be a valid cheat code; it only draws the border under the invisible text.

Perhaps I am asking for something that isn't possible, but ideally what I would like to have happen is for an XML element which looks like this:

<textfield>What is your name?</textfield>

To appear like this:

What is your name? ______________________________________

In addition to this, the length of the underlined space should always come to a stop on the right side in the same place; the line length needs to be variable.

A shortened version of my CSS can be found here: http://jsfiddle.net/7GyVN/

And the relevant CSS here as well:

textfield {
    float:left;
    clear:both;
    margin: .5em 0 .5em 2em;
    width:80%;
}
textfield:after {
    /*not really very good*/
    content:".";
    color:rgba(0, 0, 0, 0);
    border-bottom:1px solid rgba(0, 0, 0, 1);
    float:right;
}

Is this possible with a single element and pseudo selectors, or do I just need to buck up and write a script to make this preview styling easier?

Answer 1

Demo

textfield {
    white-space: nowrap;   /* Force :after to stay at the same line */
    overflow: hidden;      /* Hide :after overflow */
}
textfield:after {
    content: "";
    display: inline-block;
    width: 100%;           /* Make it full-line (more than necessary) */
    border-bottom: 1px solid #000;
}