在CSS中扩展下划线

Question

Is it possible to over extend and underline so that it goes further than the word itself?

Like so:

I tried:

.numbers u {
    width:200px;
}

FIDDLE

I was hoping it would work but I got nothing.

Is there some sort of css trick to make this possible?

Answer 1

You can use content property with :after pseudo, if you do not want to use this, than you need to feed   on each u tag

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

Demo

Info: What's 00a0 here? It's a Non Break Space

Can also use something like

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

Demo 2 (But I would prefer \\00a0 one..)

---

As far as browser support goes, content as well as :after are supported in IE8, Side note, ::after is supported in IE9 but using :after is just fine here. so support shouldn't matter much.

Answer 2

No. You need to put a border-bottom and extend the width of the p where the text exists.

WORKING DEMO

The HTML:

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

The CSS:

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

Hope this helps.

Answer 3

Use a border rather than underlining. Use the first-child pseudo class to apply it to only the first paragraph within .numbers :

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

JSFiddle