Superscript in CSS only?

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

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.

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

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 }

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