Superscript in CSS only?

Css Problem Overview

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 the character aligned correctly.

What I have currently, looks like this:

a.external:after {
  font-size: 50%;
  vertical-align: top;
  content: "+";
}

but it doesn't work.

Naturally, I'd use the <sup>-tag, only if content would allow for HTML...

Css Solutions

Solution 1 - Css

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.

Solution 2 - Css

Honestly I don't see the point in doing superscript/subscript in CSS only. There's no handy CSS attribute for it, just a bunch of homegrown implementations including:

.superscript { position: relative; top: -0.5em; font-size: 80%; }

or using vertical-align or I'm sure other ways. Thing is, it starts to get complicated:

CSS superscript spacing on line height;
Beware CSS for Superscript/Subcript on why you arguably shouldn't style superscript/subscript with CSS at all;

The second point is worth emphasizing. Typically superscript/subscript is not actually a styling issue but is indicative of meaning.

Side note: It's worth mentioning this list of entities for common mathematical superscript and subscript expressions even though this question doesn't relate to that.

The sub/sup tags are in HTML and XHTML. I would just use those.

As for the rest of your CSS, the :after pseudo-element and content attributes are not widely supported. If you really don't want to put this manually in the HTML I think a Javascript-based solution is your next best bet. With jQuery this is as simple as:

$(function() {
  $("a.external").append("<sup>+</sup>");
};

Solution 3 - Css

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 }

Solution 4 - Css

I was working on a page with the aim of having clearly legible text, with superscript elements NOT changing the line's top and bottom margins - with the following observations:

If for your main text you have line-height: 1.5em for example, you should reduce the line-height of your superscript text for it to appear correctly. I used line-height: 0.5em.

Also, vertical-align: super works well in most browsers but in IE8 when you have a superscript element present, the rest of that line is pushed down. So instead I used vertical-align: baseline together with a negative top and position: relative to achieve the same effect, which seems to work better across browsers.

So, to add to the "homegrown implementations":

.superscript {
font-size: .83em;
line-height: 0.5em;
vertical-align: baseline;
position: relative;
top: -0.4em;
}

Solution 5 - Css

http://htmldog.com/articles/superscript/ Essentially:

position: relative;
bottom: 0.5em;
font-size: 0.8em;

Works well in practice, as far as I can tell.

Solution 6 - Css

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

Solution 7 - Css

This is another clean solution:

sub, sup {vertical-align: baseline; position: relative; font-size: 70%;} /* 70% size of its parent element font-size which is good. */
sub {bottom: -0.6em;} /* use em becasue they adapt to parent font-size */
sup {top: -0.6em;} /* use em becasue they adapt to parent font-size */

In this way you can still use sup/sub tags but you fixed their idious behavior to always screw up paragraph line height.

So now you can do:

  <p>This is a line of text.</p>
  <p>This is a line of text, <sub>with sub text.</sub></p>
  <p>This is a line of text, <sup>with sup text.</sup></p>
  <p>This is a line of text.</p>

And your paragraph line height should not get screwed up.

Tested on IE7, IE8, FF3.6, SAFARI4, CHROME5, OPERA9

I tested using a p {line-height: 1.3;} (that is a good line height unless you want your lines to stick too close) and it still works, cause "-0.6em" is such a small amount that also with that line height the sub/sub text will fit and don't go over each other.

Forgot a detail that might be relevant I always use DOCTYPE in the 1st line of my page (specifically I use the HTML 4.01 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">). So I don't know if this solution works well when browser is in quirkmode (or not standard mode) due to lack of DOCTYPE or to a DOCTYPE that does not triggers Standard/Almost Standard mode.

Solution 8 - Css

If you are changing the font size, you might want to stop shrinking sizes with this rule:

sup sub, sub sup, sup sup, sub sub{font-size:1em !important;}

Solution 9 - Css

try

.aftersup {
 font-size: 1em;
 margin: left;
 vertical-align: .7em;
}

or plain "after"

.after {
 font-size: 1em;
 margin: left;
 vertical-align: .7em;
}

".a.external:after" could be simplified

.after {
 font-size: 50%;
 margin: left;
 vertical-align: .7em;
}

using "font size 50%" - 50% of what size? this might not work well if not used within some tag defining text size previous to superscript...

if you use "font-size: 1em;" then the font size is set for sure, without reference to a tag that defines link text size, unless link text is set at 100% and superscript is 50% of that 100%.

Using "font-size: 1em;" actually sets font size baseline.

Set "vertical-align" size smaller, if you want superscript font to be smaller than link text

Set "vertical-align" size same as font size, if you want superscript font to be same size as link text

To align with link text, you need to set "margin" same as link text (left, center, right, justified).

.text {
  font-size: 1em;
  margin: left;
}
.aftersup {
  font-size: 1em;
  margin: left;
  vertical-align: .7em;
}

It should be something like below example links with ^superscript

<p class="text"><a href="url">https://stackoverflow.com/questions/501671/superscript-in-css-only</a><aftersup>+</aftersup></p>

<p class="text"><a href="url">https://stackoverflow.com/questions/501671/superscript-in-css-only</a><aftersup>You got this</aftersup></p>

<a href="url">https://stackoverflow.com/questions/501671/superscript-in-css-only</a><aftersup>+</aftersup>

<a href="url">https://stackoverflow.com/questions/501671/superscript-in-css-only<aftersup>You got this</aftersup>

As in...

https://stackoverflow.com/questions/501671/superscript-in-css-only<aftersup>+</aftersup>

https://stackoverflow.com/questions/501671/superscript-in-css-only<aftersup>You got this

Solution 10 - Css

Check out: http://www.cssdesignpatterns.com/Chapter%2012%20-%20ALIGNING%20CONTENT/Vertical-aligned%20Content/example.html

if looks like you want "vertical-align:text-top"

Solution 11 - Css

I am not sure if this is related but I have solved my problem with ² HTML entities as I wasn't able to add any other html tags inside a <label> tag. So the idea was using ASCII codes instead of css or HTML tags.

Solution 12 - Css

The CSS property font-variant-position is under consideration and may eventually be the answer to this question. As of early 2017, only Firefox supports it, though.

.super {
    font-variant-position: super;
}

See MDN.

Solution 13 - Css

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

Solution 14 - Css

Here's the exact way sup uses:

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

Found this via google chrome inspect element.

Solution 15 - Css

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.

Content Type	Original Author	Original Content on Stackoverflow
Question	Henrik Paul	View Question on Stackoverflow
Solution 1 - Css	Peter Boughton	View Answer on Stackoverflow
Solution 2 - Css	cletus	View Answer on Stackoverflow
Solution 3 - Css	paulmurray	View Answer on Stackoverflow
Solution 4 - Css	Lessan Vaezi	View Answer on Stackoverflow
Solution 5 - Css	Nick Presta	View Answer on Stackoverflow
Solution 6 - Css	Christian Stadler	View Answer on Stackoverflow
Solution 7 - Css	Marco Demaio	View Answer on Stackoverflow
Solution 8 - Css	freexe	View Answer on Stackoverflow
Solution 9 - Css	Creative Arts9	View Answer on Stackoverflow
Solution 10 - Css	Frank Schwieterman	View Answer on Stackoverflow
Solution 11 - Css	Archrade	View Answer on Stackoverflow
Solution 12 - Css	hashchange	View Answer on Stackoverflow
Solution 13 - Css	Razvan Cercelaru	View Answer on Stackoverflow
Solution 14 - Css	HiPeoples	View Answer on Stackoverflow
Solution 15 - Css	Nubian	View Answer on Stackoverflow