Superscript in CSS only?

Question

How can I get superscript done, only in CSS?

I have a stylesheet where I mark the external links with a superscript character, but I\'m having a hard time getting th

Answer 1

You can do superscript with vertical-align: super, (plus an accompanying font-size reduction).

However, be sure to read the other answers here, particularly those by paulmurray and cletus, for useful information.

Answer 2

Here's the exact way sup uses:

.superscript{
    vertical-align:super;
    font-size:smaller;
}

Found this via google chrome inspect element.

Answer 3

The following is taken from Mozilla Firefox's internal html.css:

sup {
  vertical-align: super;
  font-size: smaller;
  line-height: normal;
}

So, in your case it would be something, like:

.superscript {
  vertical-align: super;
  font-size: smaller;
  line-height: normal;
}

Answer 4

The CSS documentation contains industry-standard CSS equivalent for all HTML constructs. That is: most web browsers these days do not explicitly handle SUB, SUP, B, I and so on - they (kinda sorta) are converted into SPAN elements with appropriate CSS properties, and the rendering engine only deals with that.

The page is Appendix D. Default style sheet for HTML 4

The bits you want are:

small, sub, sup { font-size: .83em }
sub             { vertical-align: sub }
sup             { vertical-align: super }

Answer 5

.superscript {
  position: relative;
  top: 5px;
  font-size: 90%;
  vertical-align: super;
}

Answer 6

Related or maybe not related, using superscript as a HTML element or as a span+css in text might cause problem with localization - in localization programs.

For example let's say "3^rd party software":

3<sup>rd</sup> party software
3<span class="superscript">rd</span> party software

How can translators translate "rd"? They can leave it empty for several cyrrilic languages, but what about of other exotic or RTL languages?

In this case it is better to avoid using superscripts and use a full wording like "third-party software". Or, as mentioned here in other comments, adding plus signs in superscript via jQuery.