HTML5/CSS 宽度和边框

Question

我正在创建一个用于打印的 html5 文件。打印输出的一部分是要在打印输出上手动填写的表格。我想像在这种表格上一样在空白下方创建下划线。

示例代码位于 http://www.w3schools.com/cssref/tryit.asp?filename=trycss_dim_height允许我定义

元素的宽度，并为其应用 border-bottom css 属性。即使

元素中没有文本，输出也是元素宽度的假下划线。

OS X Yosemite 上的 Safari 和 Chrome 中的相同代码不显示任何底部边框。

有没有办法生成指定长度的下划线？

Answer 1

1. 制作一个名为“sp”的自定义标签元素，例如。 <p>THIS IS A <sp/> SPACE</p>

2. 新“sp”标签的 CSS:

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

1. 根据你需要的宽度添加(如下例):

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>