Superscript underlines text

Question

I have an HTML code something like:

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

with css

 #blah{ text-decoration:underline; } 

But that moves the underline from top to bottom, and it looks weird. Is there a way that I can fix using only css

Answer 1

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

Answer 3

If you want to use underscore rather than the bottom border (these are two different things), then the only typographically acceptable solution seems to be to use superscript glyphs instead of sup markup or related CSS. You would do this with font-feature-settings .

The bad news is that among the fonts commonly installed on people's computers, only a few fonts, such as the so-called C-fonts (Calibri, Cambria, Candara, Consolas, Constantia, Corbel) and Palotino Linotype, contain such characters. There are also some limitations in browser support (for example, support for IE 9 and later). 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 returns to the unoccupied “1st” (under normal behavior).

Answer 4

The accepted answer did not work for me, because the border was sometimes compensated by underlining, depending on the browser scale and / or font size.

However, I found a solution on the Internet that did not have such an effect. All this thanks to the comment left by "ruthless" @ https://gist.github.com/unruthless/413930 , which credits Twitter user "chikuyonok". The user also provided a working example: http://jsfiddle.net/yyHNp/5/

Below is the example above, and works great 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; } 

Answer 5

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

code:

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

Title Name ^{& reg;} Continuation
AT & T Uverse®

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

hope this helps someone

-S

Answer 6

This can help, especially if you are trying to override the styles set by the framework or the useless default browser styles:

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

Obviously also with

 #blah { text-decoration: underline; } 

like in the OP.

Answer 7

Just posted it elsewhere;

There is no simple solution to this problem (there always seems to be a situation that needs to be fixed). I needed only 2px or 1px underscore; 'u1' and 'u2'. Although I saved "u" as simply {text-decoration: underline;} (I like to keep it short and sweet)

(works with a wrapper).

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/