Superíndice en CSS solamente?

¿Cómo puedo obtener un superíndice hecho solo en CSS?

Tengo una hoja de estilo donde marco los enlaces externos con un carácter superíndice, pero me está costando conseguir que el personaje se alinee 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 etiqueta , solo si el content permitiera HTML …

Puede hacer un superíndice con vertical-align: super , (más una reducción de font-size adjunta).

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 sentido de hacer superíndices / subíndices en CSS solamente. No hay ningún atributo de CSS útil para él, 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 comienza a complicarse:

  • Espaciado superíndice de CSS en altura de línea;
  • Tenga cuidado con CSS para Superíndice / Subíndice sobre por qué no debería pegar el estilo de superíndice / subíndice con CSS;

El segundo punto vale la pena enfatizar. Normalmente, 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 comunes de superíndices y subíndices matemáticos , aunque esta pregunta no se relaciona con eso.

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

En cuanto al rest de su CSS, los siguientes atributos de pseudo-elemento y contenido no son ampliamente compatibles. Si realmente no quieres poner esto manualmente en el HTML, creo que una solución basada en Javascript es tu próxima mejor apuesta. Con jQuery esto es tan simple como:

 $(function() { $("a.external").append("+"); }; 

La documentación de CSS contiene CSS estándar de la industria equivalente para todas las construcciones HTML. Es decir: la mayoría de los navegadores web actualmente no manejan explícitamente SUB , SUP , B , I , etc. – se convierten (algo así) en elementos SPAN con propiedades de CSS apropiadas, y el motor de renderizado solo 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 objective de tener 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 el alto de la línea de su texto superíndice para que aparezca correctamente. line-height: 0.5em .

Además, vertical-align: super funciona bien en la mayoría de los navegadores pero en IE8 cuando tienes un elemento superíndice presente, el rest de esa línea se empuja hacia abajo. Entonces, en su lugar, utilicé vertical-align: baseline junto con una position: relative y un top negativos position: relative para lograr el mismo efecto, que parece funcionar mejor en todos los navegadores.

Entonces, para agregar a las “implementaciones propias”:

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

http://htmldog.com/articles/superscript/ Básicamente:

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

Funciona bien en la práctica, por lo que yo sé.

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

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

Entonces, en tu 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 forma, aún puedes usar tags sup / sub, pero arreglaste su comportamiento idílico para arruinar siempre la altura de la línea de párrafo .

Entonces ahora puedes hacer:

  

This is a line of text.

This is a line of text, with sub text.

This is a line of text, with sup text.

This is a line of text.

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

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 quieras que tus líneas se peguen demasiado) y todavía funciona, porque “-0.6em” es una cantidad tan pequeña que también con eso altura de la línea, el texto del sub / sub se ajustará y no se superpondrá.

Olvidé un detalle que podría ser relevante. Siempre uso DOCTYPE en la primera línea de mi página (específicamente uso el HTML 4.01 ). Así que 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 la fuente, le recomendamos 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 ² Entidades HTML ya que no pude agregar ninguna otra etiqueta html dentro de una . Entonces, la idea era usar códigos ASCII en lugar de tags css o HTML.

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

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

Ver MDN .

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

Esta es la forma exacta en que sup usa:

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

Encontré esto a través del elemento de google chrome inspeccionar.