在CSS中扩展下划线

Question

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

像这样:

我试过了:

.numbers u {
    width:200px;
}

小提琴

我希望它会起作用,但我一无所获.

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

Answer 1

如果您不想使用此content属性:after,则可以使用带伪的属性,而不是需要以 每个u标记为基础

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

演示

信息:这是什么00a0？这是一个非休息空间

也可以使用类似的东西

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

演示2 (但我更喜欢\00a0一个..)

至于浏览器支持,content以及:afterIE8中支持,Side note,::after在IE9中受支持,但:after在这里使用就好了.所以支持不应该太重要.

Answer 2

不需要.您需要放置border-bottom并扩展p文本所在位置的宽度.

工作演示

HTML:

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

CSS:

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

希望这可以帮助.