Superscript Underline Moves Up With Text

I have HTML code something like:

We have winner of 1^st Tournament

with css #blah{ text-decoration:underline; } But th

Solution 1:

Its simple try this

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

Solution 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

Solution 3:

If you want to use underline and not bottom border (they are different things), then the only typographically acceptable solution seems to be to use superscript glyphs instead of sup markup or CSS corresponding to it. You would do this with font-feature-settings.

The bad news is that among fonts commonly installed on people’s computers, only a few fonts, like the so-called C fonts (Calibri, Cambria, Candara, Consolas, Constantia, Corbel) and Palatino Linotype, contain such glyphs. There are also some limitations in browser support (e.g., no support on IE 9 and older). Example:

<style>
.sup { 
  -webkit-font-feature-settings: "sups";
  -moz-webkit-font-feature-settings: "sups";
  font-feature-settings: "sups";
}
</style>
We have winner of 1<span class=sup>st</span> Tournament

On the other hand, using this approach is safe in the sense that when the technique does not work, the rendering falls back to unstyled “1st” (with underline behaving normally).

Solution 4:

The accepted answer did not work for me, as the border was sometimes offset with the underline, depending on the browser zoom and/or font size.

However, I did find a solution online that did not have this effect. It's all thanks to the comment left by "unruthless" @ https://gist.github.com/unruthless/413930 who credits Twitter user "chikuyonok". The user also provided a working example: http://jsfiddle.net/yyHNp/5/

The following is taken directly from the example linked above and works beautifully for me.

a {
    text-decoration: none;
    background: -moz-linear-gradient(left, red, red 100%);
    background: -ms-linear-gradient(left, red, red 100%);
    background: -o-linear-gradient(left, red, red 100%);
    background: -webkit-gradient(linear, 0 0, 100% 0, from(red), to(red));
    background: -webkit-linear-gradient(left, red, red 100%);
    background: linear-gradient(left, red, red 100%);
    background-position: 0 100%;
    background-size: 10px 1px;
    background-repeat: repeat-x;
}

Solution 5:

If you don't want an underline at all but you want the superscript or trademark to be part of the anchor tag. here is what I did. I wanted the underline only on hover.

code:

a{text-decoration:none;}  a:hover .supS{text-decoration:underline;display:inline-block;}

Name titleContinued
AT&T Uverse

link to demo: http://jsfiddle.net/sunnysak/2ttx5/

hope it helps someone

-S