Superscript underline moves up with text

Question

I have HTML code something like:

<div id="blah">
   We have winner of 1<sup>st</sup> Tournament
</div>

with css

#blah{
text-decoration:underline;
}

But this moves underline of st to top and it looks wierd. Is there any way that i can fix it using css only

Answer 1

Its simple try this

#blah sup{
display:inline-block;
border-bottom:1px solid #000;
padding-bottom:2px;//as per your requirement
}

Answer 2

use border-bottom instead of text-decoration (If you have only one line of text)

#blah{
    border-bottom:solid 1px black;
    display:inline-block;
    line-height:15px
}

DEMO