Hochgestellte Schrift nur in CSS?

Question

Hochgestellte Schrift nur in CSS?

Gefragt el 1 de Februar, 2009: Wann wurde die Frage gestellt
336493 Ansichten: Anzahl der Besuche der Frage
5 Antworten: Anzahl der Fragenantworten
Gelöst: Aktueller Status der Frage

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...

Gefragt el 1 de Februar, 2009 von Henrik Paul

Answer 1

5 Antworten

Answer 2

15voto

Nick Presta Punkte 27458

http://htmldog.com/articles/superscript/ Im Wesentlichen:

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

Das funktioniert in der Praxis gut, soweit ich das beurteilen kann.

Beantwortet el 1 de Februar, 2009 von Nick Presta (27458 Punkte )

Answer 3

7voto

Marco Demaio Punkte 32210

Dies ist eine weitere saubere Lösung:

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 */

Auf diese Weise können Sie kann weiterhin sup/sub verwenden Tags, aber Sie ihr idiotisches Verhalten, die Höhe von Absatzzeilen immer zu verfälschen, behoben .

Das können Sie jetzt tun:

  <p>This is a line of text.</p>
  <p>This is a line of text, _{with sub text.}</p>
  <p>This is a line of text, <sup>with sup text.</sup></p>
  <p>This is a line of text.</p>

Und die Höhe der Absatzzeilen sollte nicht durcheinander geraten.

Getestet auf IE7, IE8, FF3.6, SAFARI4, CHROME5, OPERA9

Ich testete mit einer p {line-height: 1.3;} (das ist eine gute Zeilenhöhe, es sei denn, man will, dass die Zeilen zu dicht beieinander stehen) und es funktioniert immer noch, denn "-0.6em" ist ein so geringer Wert, dass auch bei dieser Zeilenhöhe der Unter-/Teiltext passt und sich nicht überschneidet.

Ich habe ein Detail vergessen, das relevant sein könnte: Ich verwende immer DOCTYPE in der 1. Zeile auf meiner Seite (Ich verwende insbesondere die HTML 4.01 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> ). Ich weiß also nicht, ob diese Lösung gut funktioniert, wenn sich der Browser im Quirkmode (oder nicht im Standardmodus) befindet, weil kein DOCTYPE vorhanden ist oder weil ein DOCTYPE den Standard- bzw. Fast-Standard-Modus nicht auslöst.

Beantwortet el 23 de August, 2010 von Marco Demaio (32210 Punkte )

Answer 4

4voto

freexe Punkte 96

Wenn Sie die Schriftgröße ändern, sollten Sie die Verkleinerung mit dieser Regel stoppen:

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

Beantwortet el 15 de Juni, 2011 von freexe (96 Punkte )

Answer 5

3voto

hashchange Punkte 6413

Die CSS-Eigenschaft font-variant-position wird derzeit geprüft und könnte die Antwort auf diese Frage sein. Seit Anfang 2017 wird sie allerdings nur von Firefox unterstützt.

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

Véase MDN .

Beantwortet el 22 de Februar, 2017 von hashchange (6413 Punkte )

Answer 6

2voto

Creative Arts9 Punkte 11

Essayer

.aftersup {
 font-size: 1em;
 margin: left;
 vertical-align: .7em;
}

oder einfach "nach"

.after {
 font-size: 1em;
 margin: left;
 vertical-align: .7em;
}

".a.external:after" könnte vereinfacht werden

o

.after {
 font-size: 50%;
 margin: left;
 vertical-align: .7em;
}

Verwendung von "Schriftgröße 50%" - 50% von welcher Größe? Dies könnte nicht gut funktionieren, wenn es nicht innerhalb eines Tags verwendet wird, der die Textgröße vor der Hochstellung definiert...

Wenn Sie "font-size: 1em;" verwenden, wird die Schriftgröße definitiv festgelegt, ohne Bezug auf ein Tag, das die Größe des Linktextes definiert, es sei denn, der Linktext ist auf 100% festgelegt und die hochgestellte Schrift beträgt 50% dieser 100%.

Die Verwendung von "font-size: 1em;" setzt die Schriftgröße tatsächlich auf die Grundlinie.

Stellen Sie die Größe von "vertical-align" kleiner ein, wenn Sie möchten, dass die hochgestellte Schrift kleiner als der Linktext ist.

Legen Sie die Größe der "vertikalen Ausrichtung" gleich der Schriftgröße fest, wenn Sie möchten, dass die hochgestellte Schrift die gleiche Größe wie der Linktext hat.

Um den Linktext auszurichten, müssen Sie den "Rand" wie den Linktext einstellen (links, zentriert, rechts, ausgerichtet).

.text {
  font-size: 1em;
  margin: left;
}
.aftersup {
  font-size: 1em;
  margin: left;
  vertical-align: .7em;
}

Sie sollte in etwa so aussehen wie die folgenden Beispiellinks mit Hochgestellt

<p class="text"><a href="url">https://stackoverflow.com/questions/501671/superscript-in-css-only</a><aftersup>+</aftersup></p>

o

<p class="text"><a href="url">https://stackoverflow.com/questions/501671/superscript-in-css-only</a><aftersup>You got this</aftersup></p>

o