Superíndice solo en CSS?

¿Cómo puedo hacer superíndice, solo en CSS?

Tengo una hoja de estilo donde marco los enlaces externos con un carácter de superíndice, pero me resulta difícil alinear el carácter correctamente.

Lo que tengo actualmente, se ve así:

a.external:after {
  font-size: 50%;
  vertical-align: top;
  content: "+";
}

Pero no funciona.

Naturalmente, usaría la <sup>etiqueta, solo si contentpermitiría HTML ...

Puede hacer superíndice con vertical-align: super, (más una font-sizereducción que lo acompaña ).

Sin embargo, asegúrese de leer las otras respuestas aquí, particularmente las de paulmurray y cletus , para obtener información útil.

Honestamente, no veo el punto de hacer superíndice / subíndice solo en CSS. No hay un atributo CSS útil para ello, solo un montón de implementaciones locales 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 comienza a complicarse:

• Espaciado de superíndice CSS en altura de línea;
• Cuidado con CSS para superíndice / Subcript sobre por qué podría decirse que no deben estilo superíndice / subíndice con CSS en absoluto ;

Vale la pena destacar 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 las expresiones matemáticas comunes de superíndice y subíndice a pesar de que esta pregunta no se relaciona con eso.

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

En cuanto al resto de su CSS, los atributos de pseudoelemento y contenido: after no son ampliamente compatibles. Si realmente no desea poner esto manualmente en el HTML, creo que una solución basada en Javascript es su próxima 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 de manera explícita SUB, SUP, B, Iy así sucesivamente - que (un poco sorta) se convierten en SPANelementos con propiedades CSS correspondiente y, el motor de renderizado sólo se ocupa de eso.

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

Los bits que quieres 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 de superíndice que NO cambiaran los márgenes superior e inferior de la línea, con las siguientes observaciones:

Si, por line-height: 1.5emejemplo, tiene el texto principal , debe reducir la altura de la línea del texto superíndice para que aparezca correctamente. He utilizado line-height: 0.5em.

Además, vertical-align: superfunciona 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 presiona hacia abajo. Entonces, en cambio, lo usé vertical-align: baselinejunto con un negativo topy position: relativepara 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 de html.css interno de Mozilla Firefox:

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

Entonces, en su caso, sería algo así 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 etiquetas sup / sub, pero corrigió su comportamiento idílico para arruinar siempre la altura de la línea de párrafo .

Entonces 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 del párrafo no se debe arruinar.

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, porque "-0.6em" es una cantidad tan pequeña que también con esa altura de línea se ajustará el texto sub / sub y no se repasen

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

Si está cambiando el tamaño de fuente, es posible que desee dejar de reducir el tamaño 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 <label>etiqueta. Entonces, la idea era usar códigos ASCII en lugar de etiquetas CSS o HTML.

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

si parece que quieres "vertical-align: text-top"

La propiedad CSS font-variant-positionestá bajo consideración y eventualmente puede ser la respuesta a esta pregunta. Sin embargo, a principios de 2017, solo Firefox lo admite.

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

Ver MDN .

Relacionado o quizás no relacionado, el uso de superíndice como elemento HTML o como span + css en el texto puede causar problemas con la localización, en los programas de localización.

Por ejemplo, digamos "3 ^rd software de otros fabricantes":

3<sup>rd</sup> party software
3<span class="superscript">rd</span> party software

¿Cómo pueden los traductores traducir "rd"? Pueden dejarlo vacío para varios idiomas cirílicos, pero ¿qué pasa con otros lenguajes exóticos o RTL?

En este caso, es mejor evitar el uso de superíndices y utilizar una redacción completa como "software de terceros". O, como se menciona aquí en otros comentarios, agregar signos más en superíndice a través de jQuery.

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

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

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

Encontré esto a través del elemento de inspección de Google Chrome.