CSS for <sub> and <sup>

CSS for <sup> and <sub>

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

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

Amazing, thank you!!

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

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

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

+1

Thanks, man this helped

Thanks man. Good work 👍