CSS para <sub> y <sup>

Con CSS puede decidir por su mismo qué tan alto debe ser el superíndice de un texto o qué tan bajo debe ser el subíndice.

Por ejemplo, puede utilizar las siguientes reglas para esto:

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

.suptext {
   top: -0.5em;
}

.subtext {
   bottom: -0.25em;
}

Tanto para sub como para sup, reducimos el tamaño de fuente para que el texto establecido superior o inferior parezca un poco más pequeño. Además, es importante utilizar "position: relative", "line-height: 0" y "vertical-align: baseline", lo que garantiza que el texto se escribirá en relación con el otro texto y no interferirá con otras líneas.

Finalmente configuramos sup y sub con top y bottom en su posición superior o inferior.

PD: Al escribir aquí directamente sup y sub en lugar de las clases .suptext y .subtext, puede influir directamente en la apariencia de las etiquetas <sub> y <sup>.
21/10/2023 a las 20:03

También puede definir "super" o "sub" en su CSS como valor de "vertical-align" y establecer el texto alto o bajo con esto.

Algunos navegadores incluso traducen internamente las etiquetas <sup> y <sub> normales a ese CSS.

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

Si ocurre algún problema con las relaciones de las líneas, también puede establecer la altura de la línea (line-height) en 0, como se hizo en el ejemplo anterior.
23/10/2023 a las 19:44

Generalmente, no soy un amigo de realizar las etiquetas HTML sub y sup con CSS. Finalmente, sub y sup son etiquetas que tienen un significado especial tal como h1, h2 o p.

Es por eso que prefiero usar y preferir las etiquetas reales <sub> y <sup> en el código fuente html y solo cambiar la apariencia de las etiquetas con CSS si es necesario, con algo como sub {font-size: ...} y así sucesivamente..
27/10/2023 a las 21:03