Skip to content

Instantly share code, notes, and snippets.

@unruthless
Created May 26, 2010 01:31
Show Gist options
  • Save unruthless/413930 to your computer and use it in GitHub Desktop.
Save unruthless/413930 to your computer and use it in GitHub Desktop.
CSS for <sub> and <sup>
sub, sup {
/* Specified in % so that the sup/sup is the
right size relative to the surrounding text */
font-size: 75%;
/* Zero out the line-height so that it doesn't
interfere with the positioning that follows */
line-height: 0;
/* Where the magic happens: makes all browsers position
the sup/sup properly, relative to the surrounding text */
position: relative;
/* Note that if you're using Eric Meyer's reset.css, this
is already set and you can remove this rule */
vertical-align: baseline;
}
sup {
/* Move the superscripted text up */
top: -0.5em;
}
sub {
/* Move the subscripted text down, but only
half as far down as the superscript moved up */
bottom: -0.25em;
}
@vfonsecad
Copy link

Amazing, thank you!!

@kaidjohnson
Copy link

@unruthless @michaeladamek -- Not sure of the complete x-browser implications (will test IE/Safari tomorrow), but one way to remove the text-decoration from <sub> and <sup> is to display: inline-block. http://jsfiddle.net/kaidjohnson/89jdwp0f/ Seems cleaner than adding more selectors, but full browser testing is still needed on this example.

@o-o-ZEPHYROS-o-o
Copy link

o-o-ZEPHYROS-o-o commented Nov 22, 2016

This is great! Since I was already using the SUP tag, I just added your code to my CSS and voila. Well done!

@sjorsvanheuveln
Copy link

Thanks this implementation is fantastic. This helped me to solve some alignment problems that were caused by superscript for mathematical notations.

@Tzikas
Copy link

Tzikas commented May 12, 2017

+1

@Disney-Banje
Copy link

Thanks, man this helped

@christoph-werker
Copy link

Thanks man. Good work 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment