Extending an underline in CSS

css, html, underline

Solution

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.

Problem

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?

Original source