¿Superíndice solo en CSS?
¿Cómo puedo hacer un superíndice, solo en CSS?
Tengo una hoja de estilo donde marco los enlaces externos con un carácter de superíndice, pero me cuesta alinear el carácter correctamente.
Lo que tengo actualmente se parece a esto:
a.external:after {
font-size: 50%;
vertical-align: top;
content: "+";
}
pero no funciona.
Naturalmente, usaría la <sup>etiqueta -, sólo si contentpermitiera HTML...
Puedes hacer un superíndice con vertical-align: super, (más una font-sizereducción 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índice/subíndice solo en CSS. No hay ningún 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 alineación vertical o estoy seguro de otras formas. 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 y sepa por qué podría decirse que no debería diseñar ningún superíndice/subíndice con CSS ;
Vale la pena destacar el segundo punto. Normalmente, el superíndice/subíndice no es en realidad una cuestión de estilo, pero es indicativo del 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. Yo solo usaría esos.
En cuanto al resto de su CSS, los atributos de contenido y pseudoelemento :after no son ampliamente compatibles. Si realmente no desea poner esto manualmente en HTML, creo que una solución basada en Javascript es su siguiente mejor opción. Con jQuery esto es tan simple como:
$(function() {
$("a.external").append("<sup>+</sup>");
};
La documentación de CSS contiene equivalentes de CSS estándar de la industria para todas las construcciones HTML. Es decir: la mayoría de los navegadores web hoy en día no manejan explícitamente SUB, SUP, B, Ietc.; se convierten (más o menos) en SPANelementos con propiedades 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 objetivo de tener un texto claramente legible, con elementos en superíndice que NO cambiaran 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 en superíndice para que aparezca correctamente. Solía line-height: 0.5em.
Además, vertical-align: superfunciona bien en la mayoría de los navegadores, pero en IE8, cuando hay un elemento en superíndice presente, el resto de esa línea se presiona hacia abajo. En lugar de eso, 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 locales":
.superscript {
font-size: .83em;
line-height: 0.5em;
vertical-align: baseline;
position: relative;
top: -0.4em;
}
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 como:
.superscript {
vertical-align: super;
font-size: smaller;
line-height: normal;
}
