Search code examples
htmlcssunderline

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?

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

    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.