CODEWITHSUNDEEP
htmlcss
user2389411
user2389411

Reputation: 220

Superscript underline moves up with text

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

Upvotes: 8

Views: 20026

Answers (8)

edd
edd

Reputation: 1364

It's simple. Try this:

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

Upvotes: 14

Bartosz Maciejewicz
Bartosz Maciejewicz

Reputation: 11

# sup {
display: inline-block
text-decoration: underline
}

Upvotes: 0

Sidupac
Sidupac

Reputation: 671

Just posted this elsewhere;

There is no easy solution to this problem (seems there's always a situation that requires some fiddling to fix). I only needed 2px or 1px underline; 'u1' and 'u2'. While 'u' I kept as just {text-decoration:underline;} (I like to keep it short and sweet)

(works with wrap).

HTML:

<span class="u2">
  Registered<sup>&reg;</sup>
</span>

CSS:

.u2{
  border-bottom:2px solid #666666;display:inline;
}
sup{
  font-size: 40%;
  display: inline;
  vertical-align: top;
}

https://jsfiddle.net/sLtkx2qe/

Upvotes: 0

Why 50 points to comment...
Why 50 points to comment...

Reputation: 245

This may help, particularly if you are trying to override styles set by a framework, or unhelpful default browser styles:

#blah sup {
  position: static;
  display: inline;
  vertical-align: super;
  font-size: 75%;
}

Obviously also with

#blah {
  text-decoration: underline;
}

as in the OP.

Upvotes: 0

Sunny man
Sunny man

Reputation: 39

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 title®Continued
AT&T Uverse®

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

hope it helps someone

-S

Upvotes: 0

rposky
rposky

Reputation: 2256

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

Upvotes: 1

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201518

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

Upvotes: 1

Sowmya
Sowmya

Reputation: 26969

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

Upvotes: 6

Related Questions