Hochgestellte Schrift nur in CSS?

Question

Wie kann ich die Hochstellung nur in CSS erreichen?

Ich habe ein Stylesheet, in dem ich die externen Links mit einem hochgestellten Zeichen markiere, aber ich habe Schwierigkeiten, das Zeichen korrekt auszurichten.

Was ich derzeit habe, sieht wie folgt aus:

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

aber es funktioniert nicht.

Natürlich würde ich die <sup> -Tag, nur wenn content würde HTML ermöglichen...

Answer 1

Sehen Sie sich das an: http://www.cssdesignpatterns.com/Chapter%2012%20-%20ALIGNING%20CONTENT/Vertical-aligned%20Content/example.html

wenn es so aussieht, als ob Sie "vertical-align:text-top" wünschen

Answer 2

Ich bin mir nicht sicher, ob dies damit zusammenhängt, aber ich habe mein Problem gelöst mit ² HTML-Entitäten, da ich nicht in der Lage war, andere HTML-Tags innerhalb einer <label> Tag. Die Idee war also, ASCII-Codes anstelle von CSS- oder HTML-Tags zu verwenden.

Answer 3

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

Answer 4

Hier ist der genaue Weg, den Sup benutzt:

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

Gefunden über google chrome inspect element.

Answer 5

Die Verwendung von Hochstellung als HTML-Element oder als span+css im Text kann zu Problemen bei der Lokalisierung führen - in Lokalisierungsprogrammen.

Sagen wir zum Beispiel "3 rd Party-Software":

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

Wie können Übersetzer "rd" übersetzen? Für verschiedene kyrillische Sprachen können sie es leer lassen, aber was ist mit anderen exotischen oder RTL-Sprachen?

In diesem Fall ist es besser, auf hochgestellte Buchstaben zu verzichten und einen vollständigen Wortlaut wie "Drittanbietersoftware" zu verwenden. Oder, wie hier in anderen Kommentaren erwähnt, das Hinzufügen von Pluszeichen in hochgestellten Zeichen über jQuery.