css - 扩展宽度以填充元素 :after 上的 "float:right;"

Question

我有一个用 CSS 设置样式的最小语法 XML，我希望能够有一个不同宽度的“下划线”或一个可见的 border-bottom文本字段元素。

我尝试创建的视觉效果只是实际文档的预览。此处看到的 XML 被“编译”为具有更多数据的不同格式；目标是创建一个适用于这种“未翻译”格式的样式表，以便编辑器可以提供预览而无需实际构建最终产品。 它不需要交互。

目前实际的 XML 看起来像这样:

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

非常小!在有人建议包装/添加元素之前，我做不到 - 这就是语法!

我尝试使用 :after 伪选择器在添加 content:"."后 float 元素； color:rgba(0,0,0,0); 但这似乎不是有效的作弊代码；它只在不可见文本下绘制边框。

也许我要求的东西是不可能的，但理想情况下我希望发生的是一个看起来像这样的 XML 元素:

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

看起来像这样:

What is your name? ______________________________________

除此之外，下划线空格的长度应始终在右侧的同一位置停止；行长度需要可变。

可以在这里找到我的 CSS 的缩短版本:http://jsfiddle.net/7GyVN/

这里还有相关的 CSS:

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;
}

这是否可以通过单个元素和伪选择器实现，或者我是否只需要振作起来编写脚本来简化此预览样式？

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;
}