How can I write a CSS superscript?

Answer 1

Hello! Thanks for your question!

It's important to note that there is not really an elegant solution in CSS. The easiest way to handle superscript with with the <sup> tag in your HTML. However, you can achieve the same look in CSS with a little tweaking.

Wrap the text you want to turn into superscript in a separate <p> tag, then give it a class name. I decided on the name "superscript". Set those <p> tags to display: inline-block. Then, relative positioning and negative values as well as line-height, font size, and the vertical-align property gets us where we want to be.

That was a lot in one go so let me show you what it looks like:

p{

    display: inline-block;

}

.superscript{

    line-height: .5em;

    vertical-align: baseline;

    position: relative;

    top: -1em;

    font-size: 5px;

}

If you don't want all of your <p> tags to display as inline, feel free to assign a separate class to them and use that.

Hope this helped and let me know if you have any further questions!