CSS Großbuchstaben erzwingen

Manchmal möchten wir unseren Text in Großbuchstaben darstellen, um visuelle Akzentuierungen hervorzuheben. In CSS ist dies jedoch nicht so einfach wie das Hinzufügen von HTML-Tags. Im Folgenden werden einige Methoden zum Erzwingen von Großbuchstaben in CSS beschrieben.

text-transform

Die einfachste Methode besteht darin, die CSS-Eigenschaft text-transform zu verwenden. Diese Eigenschaft akzeptiert verschiedene Werte, aber wir werden uns auf den uppercase-Wert konzentrieren, da er den Text in Großbuchstaben umwandelt.

.text-uppercase {
  text-transform: uppercase;
}

Vorschau

font-variant

Die nächste Methode verwendet die Eigenschaft font-variant. Diese Eigenschaft verwendet den small-caps-Wert, um den Text in Kleinbuchstaben anzuzeigen und nur die Großbuchstaben zu skalierten Kapitalbuchstaben zu machen.

.text-uppercase {
  font-variant: small-caps;
}

Vorschau

::before und ::after Pseudo-Elemente

Eine weitere Methode, um Großbuchstaben zu erzwingen, besteht darin, die Pseudo-Elemente ::before und ::after zu verwenden. Wir können den Wert des content -Attributs auf den Text setzen und die CSS-Eigenschaften text-transform und font-variant auf die Pseudo-Elemente anwenden.

.text-uppercase::before,
.text-uppercase::after {
  content: attr(data-text);
  text-transform: uppercase;
  font-variant: small-caps;
}

Und dann müssen wir data-text auf das Element setzen, das wir ändern möchten.

<div class="text-uppercase" data-text="Lorem Ipsum">Lorem Ipsum</div>

Vorschau

Schlussfolgerung

In diesem Artikel haben wir einige Methoden zum Erzwingen von Großbuchstaben in CSS behandelt. Die text-transform- und font-variant-Eigenschaften sind einfach zu bedienen, während die ::before und ::after Pseudo-Elemente mehr Arbeit erfordern. Es hängt also vom jeweiligen Projekt ab, welche Methode am besten geeignet ist.