CSS for <sub> and <sup>

With CSS you can decide for yourself how high a text should be superscripted or how low it should be subscripted.

For example, you can use the following rules for this:

.suptext, .subtext {
   font-size: 80%;
   position: relative;
   line-height: 0;
   vertical-align: baseline;
}

.suptext {
   top: -0.5em;
}

.subtext {
   bottom: -0.25em;
}

For sub as well as for sup, we are reducing the font size so that the higher or lower set text appears a little bit smaller. Additionally it is important to use "position: relative", "line-height: 0" and "vertical-align: baseline" which ensures that the text will be written relative to the other text and is not interfering with other lines.

Finally we are setting sup and sub with top and bottom to their higher or lower position.

PS: When writing here directly sup and sub instead of the class .suptext and .subtext, you can directly influence the appearance of the <sub> and <sup> tags.
Last update on 2023-11-02 | Created on 2017-11-19

You can also define "super" or "sub" in your CSS as value of "vertical-align" and set the text high or low with this.

Some browsers even translate the normal <sup> and <sub> tags into that CSS internally.

.suptext {
   vertical-align: super;
   font-size: 80%;
}
 
.subtext {
   vertical-align: sub;
   font-size: 80%;
}

If there are occurring any problems with the line relations, you can additionally set the line height to 0, as it is made in the previous example.
Last update on 2023-11-02 | Created on 2017-11-20

Generally, I am not a friend of realizing the HTML tags sub and sup with CSS. Finally, sub and sup are tags that have a special meaning such as h1, h2 or p.

That's why I'd rather use and prefer the real tags <sub> and <sup> in the html source code and only change the look of the tags with CSS if necessary, with something like sub {font-size: ...} and so on.
2017-11-20 at 18:13