CODEWITHSUNDEEP
htmlcssunderline
SaturnsEye
SaturnsEye

Reputation: 6509

Extending an underline in CSS

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

Like so:

enter image description here

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?

Upvotes: 9

Views: 10902

Answers (3)

Mr. Alien
Mr. Alien

Reputation: 157404

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";
}

Demo1 

.numbers {
  line-height: 10px;
}

.numbers u:after {
  content: "\00a0\00a0\00a0\00a0";
}
<div class="numbers">

  <p><u>One</u></p>
  <p>Two</p>
  <p>Three</p>
  <p>Four</p>
  <p>Five</p>

</div>

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..)

.numbers {
    line-height:10px;
}

.numbers u:after {
    content: "................";
    color: transparent;
}
<div class="numbers">

    <p><u>One</u></p>
    <p>Two</p>
    <p>Three</p>
    <p>Four</p>
    <p>Five</p>
    
</div>

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.

Upvotes: 14

George
George

Reputation: 36794

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

Upvotes: 3

Nitesh
Nitesh

Reputation: 15779

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.

Upvotes: 6

Related Questions