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 hacia raro encontrar un caso de uso, pero quizás los superíndices que aparecen en las página web pueden aparecer demasiado pequeños y es por ello que pueda ser de utilidad modificar su tamaño y hacerlos más grandes.
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>valor 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í:
Esta referencia se puede encontrar en la página Línea de Código <sup>1</sup><br/><br/> 1: https://lineadecodigo.com
Ahora vamos a ver cómo podemos dar un estilo a este superíndice. Para ello vamos a modificar las propiedades del elemento sup. mediate CSS. Así que utilizamos el propio nombre del elemento sup como selector.
sup {
/* Estilo para nuestro selector CSS */
}
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: 20px;
}
Hay que recordar que este código deberá de ir dentro del elemento style de nuestra página web:
<style>
sup {
font-size: 20px;
}
</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>
<meta charset="UTF-8">
<title>Formato a un superíndice</title>
<style>
sup {
font-size: 20px;
}
</style>
</head>
<body>
<h1>Formato a un superíndice</h1>
Esta referencia se puede encontrar en la página Línea de Código <sup>1</sup><br/><br/><br/>
1: https://lineadecodigo.com
</body>
