CSS Superscript and Subscript

In HTML, there is the use of <sub> and <sup> tags to define the subscript and superscript text. The superscript text appears in a smaller font and the half character above the normal line. It is generally used to write mathematical equations (like x² + y² = r²), footnotes, and many more.

Unlike superscript, the subscript text appears in a smaller font and the half character below the normal line. It is generally used to write chemical equations or chemical formulas such as H₂O, H₂SO₄, etc.

In CSS, the vertical-align property is used to achieve the same thing. We can specify the superscript and subscript of text using CSS as well. This CSS property specifies the vertical alignment of the text.

Now, let's see how to achieve the superscript and subscript using the vertical-align property.

Syntax

Property values

baseline: It is the default value that aligns the text to the baseline of the parent element.

super: It is the superscript that raises the text.

sub: It is the subscript that lowers the text.

When the values super and sub of this property are applied, then the text becomes superscript or subscript.

Example- Superscript

Example- Subscript