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 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 -tag, only if content would allow for HTML...

Peter_Boughton_9360 · Answer

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.

cletus_18393 · Answer

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

paulmurray_63189 · Answer

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 }

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 }

Lessan_Vaezi_59661 · Answer

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

user_40906 · Answer

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.

user_14000622 · Answer

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

or

.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

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

or

https://stackoverflow.com/questions/501671/superscript-in-css-onlyYou got this

or