×

Superscripts and Subscripts in CSS [13/16]

Using CSS you can imitate such tags as <sub> and <sup> used for subscripts and superscripts. That's how it is done:

  1. Use the vertical-align property with the sub or super value, respectively.
  2. Reduce the font size slightly using the font-size property.

Do it
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Superscripts and Subscripts in CSS</title> </head> <body> <h1>Mobile First!</h1> <p>At the same time, a similar approach emerged&nbsp;called Mobile First, <sup>[giving precedence </sup> <span class="sup">to mobile devices]</span>. In fact, this is the same adaptive design, but with the mandatory requirement to start designing an interface with the mobile version <sub>[or, in other words:</sub> <span class="sub">with the smallest screen].</span></p> <hr> <p>Let&apos;s now digress from the article to design some fascinating formulas:</p> <ul> <li>H<sub>2</sub>O and</li> <li>H<span class="sub">2</span>O<br></li> <li>sin<sup>2</sup>x and</li> <li>sin<span class="sup">2</span>x</li> </ul> </body> </html>
CSS
body { font-size: 16px; } h1 { font-size: 24px; } .sub { } .sup { }
HTML Academy

Imitate the sup and sub ​​tags using CSS:

  1. For the .sub class, add vertical-align: sub;.
  2. For the .sup class, add vertical-align: super;.
  3. To both rules, add font-size: 12px;.

Compare the "native" tags with their CSS counterparts.

Theory Check Next