Superscript uniquement en CSS ?

Question

Comment faire pour que l'exposant soit fait, uniquement en CSS ?

J'ai une feuille de style dans laquelle je marque les liens externes avec un caractère en exposant, mais j'ai du mal à faire en sorte que le caractère soit aligné correctement.

Ce que j'ai actuellement, ressemble à ceci :

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

mais ça ne marche pas.

Naturellement, j'utiliserais le <sup> -tag, seulement si content permettrait à HTML...

Answer 1

Vous pouvez utiliser l'exposant avec vertical-align: super (plus un accompagnement font-size réduction).

Toutefois, veillez à lire les autres réponses ici, notamment ceux de paulmurray y cletus pour des informations utiles.

Answer 2

Honnêtement, je ne vois pas l'intérêt de faire des superscript/subscript en CSS uniquement. Il n'y a pas d'attribut CSS pratique pour cela, juste un tas d'implémentations maison, dont.. :

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

ou en utilisant vertical-align ou je suis sûr qu'il existe d'autres moyens. Le truc, c'est que ça commence à devenir compliqué :

• Espacement des exposants en CSS sur la hauteur de la ligne ;
• Attention aux CSS pour Superscript/Subcript sur les raisons pour lesquelles vous ne devriez pas styliser les exposants et les sous-exposants avec CSS. du tout ;

Le deuxième point mérite d'être souligné. En règle générale, l'utilisation de l'exposant ou de l'indice n'est pas une question de style, mais une indication du sens.

Note complémentaire : Il convient de mentionner que liste d'entités pour les expressions mathématiques courantes en exposant et en indice même si cette question n'a rien à voir avec ça.

Les balises sub/sup sont en HTML et XHTML. Je les utiliserais simplement.

Pour ce qui est du reste de votre CSS, le pseudo-élément :after et les attributs de contenu ne sont pas largement pris en charge. Si vous ne voulez vraiment pas intégrer ces éléments manuellement dans le code HTML, je pense qu'une solution basée sur le langage JavaScript est votre meilleure option. Avec jQuery, c'est aussi simple que cela :

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

Answer 3

La documentation CSS contient les équivalents CSS standard de l'industrie pour toutes les constructions HTML. En d'autres termes, la plupart des navigateurs Web actuels ne gèrent pas explicitement les éléments suivants SUB , SUP , B , I et ainsi de suite - elles sont (en quelque sorte) converties en SPAN avec les propriétés CSS appropriées, et le moteur de rendu ne s'occupe que de cela.

La page est Annexe D. Feuille de style par défaut pour HTML 4

Les morceaux que vous voulez sont :

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

Answer 4

Je travaillais sur une page dans le but d'avoir un texte clairement lisible, avec des éléments en exposant NE modifiant PAS les marges supérieure et inférieure de la ligne - avec les observations suivantes :

Si pour votre texte principal vous avez line-height: 1.5em par exemple, vous devez réduire la hauteur de ligne de votre texte en exposant pour qu'il apparaisse correctement. J'ai utilisé line-height: 0.5em .

Aussi, vertical-align: super fonctionne bien dans la plupart des navigateurs, mais dans IE8, lorsqu'un élément en exposant est présent, le reste de la ligne est poussé vers le bas. J'ai donc utilisé à la place vertical-align: baseline ainsi qu'un négatif top y position: relative pour obtenir le même effet, ce qui semble mieux fonctionner dans tous les navigateurs.

Donc, pour ajouter aux "implémentations maison" :

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

Answer 5

http://htmldog.com/articles/superscript/ Essentiellement :

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

Cela fonctionne bien dans la pratique, pour autant que je puisse dire.