CSS underline extension

Question

Is it possible to expand and emphasize so that it goes further than the word itself?

Same:

I tried:

.numbers u {
    width:200px;
}

Fiddle

I was hoping this would work, but I got nothing.

Is there any css trick to make this possible?

Answer 1

You can use the pseudo contentproperty :after, if you do not want to use this, than you need to feed  for each tagu

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

Demo

Info: What is 00a0 here? This is Non Break Space

You can also use something like

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

Demo 2 (but I would prefer\00a0one ..)

---

, IE8 content, :after, Side Notes, ::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;}

, .

Answer 3

Use a border, not an underline. Use the pseudo-class first-childto apply it only to the first paragraph inside .numbers:

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

Jsfiddle