CSS für <sub> und <sup>

Mit CSS kannst du selber bestimmen, wie hoch ein Text hochgestellt oder tief gestellt sein soll.

Du kannst zum Beispiel die folgenden Regeln dafür verwenden:

.suptext, .subtext {
   font-size: 80%;
   position: relative;
   line-height: 0;
   vertical-align: baseline;
}

.suptext {
   top: -0.5em;
}

.subtext {
   bottom: -0.25em;
}

Sowohl für sub als auch für sup reduzieren wir die Schriftgröße (font-size), sodass der hochgestellt oder tief gestellte Text etwas kleiner erscheint. Wichtig ist zusätzlich "position: relative", "line-height: 0" und "vertical-align: baseline", damit der Text relativ zum anderen Text erscheint und nicht mit anderen Zeilen interferiert.

Schlussendlich setzen wir noch sup und sub mit top und bottom an deren höher gestellte oder tiefer gestellte Position.

PS: Wenn du hier statt der Klasse .suptext und .subtext direkt sup und sub schreibst, kannst du direkt das Aussehen der <sub> und <sup> Tags beeinflussen.
Letztes Update am 02.11.2023 | Erstellt am 06.11.2017

Man kann im CSS auch "super" oder "sub" als Werte von "vertical-align" definieren und damit den Text hoch oder tief stellen.

So übersetzen einige Browser sogar die normalen <sup> und <sub> Tags.

.suptext {
   vertical-align: super;
   font-size: 80%;
}
 
.subtext {
   vertical-align: sub;
   font-size: 80%;
}

Falls es hier mit Probleme mit der Zeilenhöhe gibt, kann man die Zeilenhöhe (line-height) auch auf 0 stellen, wie im Beispiel zuvor.
Letztes Update am 02.11.2023 | Erstellt am 09.11.2017

Prinzipiell bin ich kein Freund davon, die HTML-Tags sub und sup mit CSS zu realisieren. Schließlich sind sub und sup Tags, die eine Bedeutung tragen, genauso wie h1, h2 oder p.

Aus diesem Grund würde ich lieber immer die echten Tags <sub> und <sup> im HTML-Quelltext verwenden und gegebenenfalls mit CSS nur das Aussehen der Tags verändern, also zum Beispiel mit sub { font-size: ... } und so weiter.
13.11.2017 um 17:18