¿Superíndice solo en CSS?

Honestamente no veo el punto en hacer superíndice/subíndice solo en CSS. No hay ningún atributo CSS útil para ello, solo un montón de implementaciones de cosecha propia que incluyen:

.superscript { position: relative; top: -0.5em; font-size: 80%; }

O usando vertical-align o estoy seguro de otras maneras. La cosa es que empieza a complicarse:

• Espaciado de superíndice CSS en la altura de la línea;
• Tenga cuidado con CSS para Superíndice / Subíndice sobre por qué podría decirse que no debería estilizar superíndice / subíndice con CSS en todos;

Vale la pena enfatizar el segundo punto. Por lo general, el superíndice/subíndice no es realmente un problema de estilo, pero es indicativo de significado.

Nota al margen: Vale la pena mencionar esta lista de entidades para expresiones matemáticas comunes de superíndice y subíndice aunque esta pregunta no se relaciona con eso.

Las etiquetas sub/sup están en HTML y XHTML. Solo usaría esos.

En cuanto al resto de su CSS, el :después los atributos de pseudo-elemento y contenido no son ampliamente soportados. Si realmente no quieres poner esto manualmente en el HTML, creo que una solución basada en Javascript es tu siguiente mejor opción. Con jQuery esto es tan simple como:

$(function() {
  $("a.external").append("<sup>+</sup>");
};

La documentación CSS contiene el equivalente CSS estándar de la industria para todas las construcciones HTML. Es decir: la mayoría de los navegadores web en estos días no manejan explícitamente SUB, SUP, B, I y así sucesivamente - que (un poco sorta) se convierten en elementos SPAN con propiedades CSS apropiadas, y el motor de representación solo se ocupa de eso.

La página es Apéndice D. Hoja de estilo predeterminada para HTML 4

Los bits que desea son:

small, sub, sup { font-size: .83em }
sub             { vertical-align: sub }
sup             { vertical-align: super }

Estaba trabajando en una página con el objetivo de tener un texto claramente legible, con elementos superíndices QUE NO cambian los márgenes superior e inferior de la línea-con las siguientes observaciones:

Si para su texto principal tiene line-height: 1.5em por ejemplo, debe reducir la altura de línea de su texto superíndice para que aparezca correctamente. Usé line-height: 0.5em.

También, vertical-align: super funciona bien en la mayoría de los navegadores, pero en IE8 cuando tiene un elemento superíndice presente, el resto de esa línea se empuja hacia abajo. Tan en su lugar, usé vertical-align: baseline junto con un negativo top y position: relative para lograr el mismo efecto, que parece funcionar mejor en todos los navegadores.

Entonces, para agregar a las "implementaciones de cosecha propia":

.superscript {
    font-size: .83em;
    line-height: 0.5em;
    vertical-align: baseline;
    position: relative;
    top: -0.4em;
}

Http://htmldog.com/articles/superscript/ Esencialmente:

position: relative;
bottom: 0.5em;
font-size: 0.8em;

Funciona bien en la práctica, por lo que puedo decir.

Lo siguiente está tomado del html interno de Mozilla Firefox.css:

sup {
  vertical-align: super;
  font-size: smaller;
  line-height: normal;
}

Entonces, en tu caso sería algo como:

.superscript {
  vertical-align: super;
  font-size: smaller;
  line-height: normal;
}

Esta es otra solución limpia:

sub, sup {vertical-align: baseline; position: relative; font-size: 70%;} /* 70% size of its parent element font-size which is good. */
sub {bottom: -0.6em;} /* use em becasue they adapt to parent font-size */
sup {top: -0.6em;} /* use em becasue they adapt to parent font-size */

De esta manera, todavía puede usar las etiquetas sup/sub, pero arregló su comportamiento idiota para siempre arruinar la altura de la línea de párrafo.

Así que ahora puedes hacer:

  <p>This is a line of text.</p>
  <p>This is a line of text, <sub>with sub text.</sub></p>
  <p>This is a line of text, <sup>with sup text.</sup></p>
  <p>This is a line of text.</p>

Y la altura de la línea de párrafo no debe joderse.

Probado en IE7, IE8, FF3.6, SAFARI4, CHROME5, OPERA9

Probé usando un p {line-height: 1.3;} (que es una buena altura de línea a menos que desee que sus líneas se peguen demasiado cerca) y todavía funciona, causa "-0.6 em" es una cantidad tan pequeña que también con esa altura de línea el texto sub/sub encajará y no se sobrepasará entre sí.

Olvidé un detalle que podría ser relevante Siempre uso DOCTYPE en la 1ª línea de mi página (específicamente uso el HTML 4.01 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">). Así que no se si esta solución funciona bien cuando el navegador está en modo quirkmode (o no en modo estándar) debido a la falta de DOCTYPE o a un DOCTYPE que no desencadena el modo Estándar/Casi estándar.

Si está cambiando el tamaño de la fuente, es posible que desee dejar de reducir los tamaños con esta regla:

sup sub, sub sup, sup sup, sub sub{font-size:1em !important;}

No estoy seguro de si esto está relacionado, pero he resuelto mi problema con las entidades HTML ² ya que no pude agregar ninguna otra etiqueta html dentro de una etiqueta <label>. Así que la idea era usar códigos ASCII en lugar de etiquetas css o HTML.

La propiedad CSS font-variant-position está siendo considerada y eventualmente puede ser la respuesta a esta pregunta. Sin embargo, a principios de 2017, solo Firefox lo admite.

.super {
    font-variant-position: super;
}

Véase MDN.

Echa un vistazo: http://www.cssdesignpatterns.com/Chapter%2012%20-%20ALIGNING%20CONTENT/Vertical-aligned%20Content/example.html

Si parece que desea"vertical-align:text-top"

.superscript {
  position: relative;
  top: 5px;
  font-size: 90%;
  vertical-align: super;
}

Aquí está la forma exacta en que sup usa:

.superscript{
    vertical-align:super;
    font-size:smaller;
}

Encontrado esto a través de Google chrome inspeccionar elemento.