Superscript underline moves up with text

Issue

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

Solution

Its simple
try this

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

Answered By – edd

Answer Checked By – Senaida (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.