在CSS中扩展下划线

Question

是否有可能过度延伸和下划线，以使它比单词本身更进一步？

像这样：

我试过了：

.numbers u {
    width:200px;
}

FIDDLE

我希望它会起作用，但我一无所获。

是否有某种css技巧可以实现这一目标？

Answer 1

如果您不想使用此content，则可以使用:after属性，而不是需要在每个 标记上提供u

.numbers u:after {
    content: "\00a0\00a0\00a0\00a0";
}

Demo

信息：00a0在这里是什么？它是Non Break Space

也可以使用

之类的东西

.numbers u:after {
    content: "................";
    color: transparent;
}

Demo 2 （但我更喜欢\00a0一个..）

---

就浏览器支持而言，IE8支持content以及:after，在IE9中支持旁注，::after，但使用:after就可以了这里。所以支持不应该那么重要。

Answer 2

没有。您需要设置border-bottom并扩展文本所在的p的宽度。

<强> WORKING DEMO

HTML：

<p class="underline">One</p>

CSS：

.underline{border-bottom:1px solid #000000; width:200px; padding-bottom:5px;}

希望这有帮助。

Answer 3

使用边框而不是下划线。使用first-child伪类仅将其应用于.numbers中的第一段：

.numbers p:first-child {
    width:200px;
    border-bottom:1px solid #000;
    padding-bottom:1px;
}

JSFiddle