Exposant et en CSS?

Honnêtement, je ne vois pas l'intérêt de faire de l'exposant/indice en CSS uniquement. Il n'y a pas de pratique attribut CSS pour elle, juste un tas de homegrown implémentations notamment:

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

ou à l'aide vertical-align ou je suis sûr que d'autres façons. Chose est, il commence à se compliquer:

• CSS exposant espacement sur la hauteur de la ligne;
• Méfiez-vous de CSS pour Exposant/Subcript sur pourquoi vous ne devrait sans doute pas le style, en exposant/indice de avec CSS à tous les;

Le deuxième point est bon de le souligner. Généralement en exposant/indice n'est pas vraiment le style de question, mais elle est révélatrice de sens.

Note de côté: Il vaut la peine de mentionner cette liste des entités pour la commune de mathématiques en exposant et en indice expressions même si cette question ne concerne pas que.

Le sous/sup balises en HTML et XHTML. Je voudrais juste de l'utiliser.

Comme pour le reste de votre CSS, l' :après les pseudo-éléments et des attributs de contenu ne sont pas largement pris en charge. Si vous ne voulez vraiment pas mettre manuellement dans le code HTML je pense que Javascript solution est votre prochain meilleur pari. Avec jQuery, c'est aussi simple que:

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

Je travaillais sur une page avec l'objectif d'avoir clairement un texte lisible, avec un exposant les éléments qui ne modifie PAS la ligne du haut et du bas des marges - avec les observations suivantes:

Si pour le texte principal, vous avez line-height: 1.5em par exemple, vous devez réduire la hauteur de la ligne de vos exposants 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 quand vous avez un indice supérieur à un élément présent, le reste de la ligne, est poussé vers le bas. Donc à la place j'ai utilisé vertical-align: baseline avec un négatif top et position: relative pour obtenir le même effet, ce qui semble mieux fonctionner dans les navigateurs.

Donc, à ajouter à la "maison des implémentations":

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

Les éléments suivants sont pris à partir de Mozilla Firefox interne de html.css:

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

Donc, dans votre cas, il serait quelque chose comme:

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

Si vous modifiez la taille de police, vous voudrez peut-être arrêter de rétrécissement des tailles à cette règle:

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

La propriété CSS font-variant-position est en cours d'examen et peuvent éventuellement être la réponse à cette question. Dès le début de 2017, seulement Firefox prend en charge, si.

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

Voir MDN.

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

Liés ou peut-être pas lié, à l'aide de l'exposant comme un élément HTML ou comme une période+css dans le texte peut causer des problèmes avec la localisation dans les programmes de localisation.

Supposons par exemple "3^rd logiciels de tiers":

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

Comment les traducteurs de traduire "rd"? Ils peuvent le laisser vide pour plusieurs cyrrilic langues, mais qu'en d'autres exotiques ou RTL langues?

Dans ce cas, il est préférable d'éviter d'utiliser des exposants et utiliser une formulation comme "logiciel tiers".
Ou, comme mentionné ici dans d'autres commentaires, l'ajout d'un signe plus en exposant via jQuery.