Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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;
}
@debjitbis08
Copy link

debjitbis08 commented Nov 30, 2011

Having a strange issue with IE7. I have a large content (Terms etc.) inside a fixed height div with scroll: auto. There are a lot of sup tags inside. These show up below the div and for the full length of the content.

@rposky
Copy link

rposky commented Dec 19, 2013

This is the only consistent solution I have found to the superscript underline problem outlined above. Thanks for sharing @unruthless.

@GigaGerard
Copy link

GigaGerard commented Mar 22, 2014

Disclaimer: I don't know what this GitHub is and they are not allowed to bill me for anything, I just want to comment on this excellent post.

I use sub and sup a lot and specially with the old Explorers and now with the new Firefox 27 you run into troubles that only the here proposed CSS can save you from. Well done!

In special cases a subscript or superscript can be given
margin-left: -1px;
margin-right: 1px;
depending on the context.
Also a paragraph can be given some extra line-height when sub and sup appear in it.

@tellmethetruth
Copy link

tellmethetruth commented Jul 10, 2014

Nice! It's work for me.. 👍

@bheitkem
Copy link

bheitkem commented Aug 27, 2014

Thank you! Great work!

@imrehg
Copy link

imrehg commented Jan 30, 2015

@unruthless Trying the full test linked above, with Firefox 35.0.1 (current), now it behaves like Chrome as well, breaking the text decoration with superscipt.

@vfonsecad
Copy link

vfonsecad commented May 31, 2015

Amazing, thank you!!

@kaidjohnson
Copy link

kaidjohnson commented Jun 15, 2015

@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

sjorsvanheuveln commented Mar 30, 2017

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

Disney-Banje commented Jul 29, 2022

Thanks, man this helped

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