Superscript in CSS only?

css superscript line-height
javascript superscript
subscript in css
css vertical-align
css footnote
css italic
sup> tag not working
suffix css

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.

HTML sup tag, The <sup> tag defines superscript text. Superscript text appears half a character above the normal line, and is sometimes rendered in a Default CSS Settings. To make them appear as superscript and subscript, you’ll need to use the vertical-align property in your CSS. .super{ vertical-align: super; } .sub{ vertical-align: sub; } Your initial results should look like this:

Handy keyboard shortcuts for typing superscript or subscript in , , simply press Ctrl + Shift + + (press and hold Ctrl and Shift, then press +). The <sup> tag defines superscript text. Superscript text appears half a character above the normal line, and is sometimes rendered in a smaller font. Superscript text can be used for footnotes, like WWW [1]. Tip: Use the <sub> tag to define subscript text.

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 }

Format text as superscript or subscript in Word, , press Ctrl, Shift, and the Plus sign (+) at the same time. For subscript, press Ctrl and the Equal sign (=) at the same time. The vertical-alignproperty specifies the vertical alignment. When the superor subvalue is specified for this property, the text becomes superscript or subscript.

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

Subscript and superscript, The HTML Superscript element (sup) specifies inline text which is to be displayed as The <sup> element should only be used for typographical should be done using CSS (most likely vertical-align ) rather than <sup> . Both HTML and XHTML include the SUP tag for superscripts and the SUB tag for subscripts. However, if you’ve been involved in the standards communities, you may be “warned” against using the SUP and SUB tags and told to use CSS instead. "Now sup and sub are presentational tags and should be avoided because the presentation should be in the 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.

<sup>: The Superscript element, Did you know you can use CSS's vertical-align property to create subscript and superscript text? Subscript and superscript texts are when a part of a line of copy is either slightly higher or lower than the baseline text is. Subscript is when the text appears below the baseline and superscript is when the text appears above it, as seen in the following examples. How to make your text superscript or subscript

Create Superscript and Subscript Text in CSS, perfect! just saved me a tonne of work. Reply. User Avatar. This element only includes the global attributes. Usage notes The <sup> element should only be used for typographical reasons—that is, to change the position of the text to comply with typographical conventions or standards, rather than solely for presentation or appearance purposes.

Prevent Superscripts and Subscripts from Affecting , CSS for <sup> and <sub> Note that if you're using Eric Meyer's reset.css, this This is the only consistent solution I have found to the superscript underline  Hi, I knew this css hack cause it’s already in the starter theme for Drupal I’m using (omega) but when the superscript is underlined, it doesn’t work well (or maybe depends on the font used, mine was “Nunito” from google fonts).

CSS for <sub> and <sup> · GitHub, 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  A subscript or superscript is a character (such as a numberal or letter) that is set slightly below or above the normal line of type, respectively. It is usually smaller than the rest of the text. Subscripts appear at or below the baseline, while superscripts are above.

Comments
  • You seem to have a discrepancy: vertical-align top but <sub>? Assumedly you mean <sup>?
  • The "vertical-align:text-top" did not work for me in IE9. But, it did in FireFox 4.0. At least within a Wordpress context.
  • If content allowed HTML, separation of concerns would suffer.
  • Also, the font-size has to be reduced to give the actual superscript effect.
  • @paulmurray's answer below is more accurate and comprehensive. IMHO, it should be the accepted answer.
  • Saying "below" doesn't tend to help when there are three different ways of ordering answers. You're right though, paul's answer is a better one, and it's crazy this has over five times as many votes.
  • With "not widely supported" you mean "not supported in IE", I suppose?
  • quirksmode.org/css/contents.html not supported in IE7 and lower or in IE8 in compatibility mode.
  • ...which is quite exactly what I said, yes.
  • To simplify wrapping an A tag with a SUP tag, use the following: $("a.external").wrap("<sup />");
  • Used the accepted solution by @PeterBoughton at first, opted for this one as it does not skew line-height.
  • This works, but it screws up line-height. IMHO the only way not to screw up line-height is to use position:relative as suggested by cletus: stackoverflow.com/a/501689/260080
  • this cuts off when placed in div container
  • It’s spring 2020 and still not supported by any browser but Firefox. Ah so…