How to Implement a Superscript or Subscript Class with CSS

If you need to add a superscript or subscript text to your paragraph, you can surely use the <sup> and <sub> tags. There is one major problem with it – the line height. Look at the code below:

<p>
	No purchase necessary<sup>*</sup><br />
	You must be 18 years old to accept.<br />
	Additional requirements apply<sup>**</sup><br />
	More rules here.
</p>

A common thing you are going to see is going to be something like this:

The superscript tag breaks your line height in paragraphs

The superscript tag breaks your line height in paragraphs

That is, unless you have CSS rules to take over and make it look the way you expect it to. The rules are rather simple if you know CSS. All you need to do is position your text relative to where it should be using your current font size. Here it the CSS that I usually use but if you use a non-standard font you may want to adjust a little bit:

<p>
	No purchase necessary<span style="position: relative; top: -0.5em; font-size: 70%;">*</span><br />
	You must be 18 years old to accept.<br />
	Additional requirements apply<span style="position: relative; top: -0.5em; font-size: 70%;">**</span><br />
	More rules here.
</p>

And here’s how it looks now:

Same Line Height With Superscript Using CSS

Same Line Height With Superscript Using CSS

Now, you probably want to put the inline CSS styling into a class for using it generically. A little bit of explanation is in order – the font applied to the span is smaller, in my case 70%, which naturally gives you a smaller asterisk. Now to the good part – we are telling the browser to position this span at -0.5em, which is half the current font size upwards, making the base font line of your span right in the middle. Now that we got that, we make the font a bit smaller and given how the asterisk is mostly up there, it all works out.

Hope this helps!

This entry was posted in CSS and tagged , , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *