Estilo a un superíndice

Una de las cosas que me habéis pedido en los comentarios es saber cómo dar estilo a un superíndice mediante CSS. La verdad que al principio se me hacía raro encontrar un caso de uso, pero quizás los superíndices que aparecen en las páginas web pueden aparecer demasiado pequeños y es por ello que pueda ser de utilidad modificar su tamaño y hacerlos más grandes.

Crear un superíndice en HTML

Lo primero será poner un superíndice en HTML, para ello recurrimos al elemento sup. El texto contenido dentro del elemento será lo que aparezca en superíndice.

<sup>Texto en superíndice</sup>

De esta forma podremos utilizar un superíndice para representar una referencia dentro de nuestro documento HTML. El código quedaría algo así:

<p>Este es un texto con una referencia<sup>1</sup></p>

Aplicar estilos al superíndice

Ahora vamos a ver cómo podemos dar un estilo a este superíndice. Para ello vamos a modificar las propiedades del elemento sup mediante CSS. Así que utilizamos el propio nombre del elemento sup como selector.

sup {

}

Una vez definido nuestro selector lo que haremos será modificar el tamaño. Esto lo conseguimos mediante la propiedad font-size. A la cual vamos a dar un tamaño, en este caso mediante pixels.

sup {
  font-size: 16px;
}

Código completo

Hay que recordar que este código deberá de ir dentro del elemento style de nuestra página web:

<style>
sup {
  font-size: 16px;
}
</style>

El código completo de nuestra página web que nos permite dar estilo a un superíndice mediante CSS es el siguiente:

<!DOCTYPE html>
<html>
<head>
  <title>Estilo a un superíndice</title>
  <style>
    sup {
      font-size: 16px;
    }
  </style>
</head>
<body>
  <p>Este es un texto con una referencia<sup>1</sup></p>
</body>
</html>

Víctor Cuervo

Programador, Arquitecto IT, álter ego de Línea de Código, amante de las tecnologías, generador de conocimiento y facilitador del aprendizaje.

Descarga el código de Estilo a un superíndice

Aprende a dar estilo a un superíndice con CSS y mejora la visibilidad de tus textos. Descubre cómo modificar su tamaño fácilmente en tu página web.

Descargar código