Zum Hauptinhalt springen

[Easy] 🏷️ Pseudo-Elemente

Was sind Pseudo-Elemente​

Pseudo-Elemente (Pseudo-elements) sind CSS-Schlüsselwörter, die verwendet werden, um bestimmte Teile eines Elements auszuwählen oder Inhalte vor oder nach einem Element einzufügen. Sie verwenden die Doppelpunkt-Syntax :: (CSS3-Standard), um sich von Pseudo-Klassen (pseudo-classes) mit der Einzelpunkt-Syntax : zu unterscheiden.

Gängige Pseudo-Elemente​

1. ::before und ::after​

Die am häufigsten verwendeten Pseudo-Elemente, die zum Einfügen von Inhalten vor oder nach dem Elementinhalt verwendet werden.

.icon::before {
  content: '📌';
  margin-right: 8px;
}

.external-link::after {
  content: ' ↗';
  font-size: 0.8em;
}

Eigenschaften:

  • Müssen die Eigenschaft content enthalten (auch wenn es ein leerer String ist)
  • Sind standardmäßig inline-Elemente
  • Erscheinen nicht im DOM, können nicht von JavaScript ausgewählt werden

2. ::first-letter​

Wählt den ersten Buchstaben des Elements aus, häufig für Initialen im Magazinstil verwendet.

.article::first-letter {
  font-size: 3em;
  font-weight: bold;
  float: left;
  line-height: 1;
  margin-right: 8px;
}

3. ::first-line​

Wählt die erste Textzeile des Elements aus.

.intro::first-line {
  font-weight: bold;
  color: #333;
}

Hinweis: ::first-line kann nur für Block-Level-Elemente verwendet werden.

4. ::selection​

Passt den Stil an, wenn der Benutzer Text auswählt.

::selection {
  background-color: #ffeb3b;
  color: #000;
}

/* Firefox benötigt Präfix */
::-moz-selection {
  background-color: #ffeb3b;
  color: #000;
}

5. ::placeholder​

Passt den Stil des Formular-Placeholders an.

input::placeholder {
  color: #999;
  font-style: italic;
  opacity: 0.7;
}

6. ::marker​

Passt den Stil des Listenzeichens (list marker) an.

li::marker {
  content: '✓ ';
  color: green;
  font-size: 1.2em;
}

7. ::backdrop​

Wird für die Hintergrundmaske von Vollbild-Elementen verwendet (wie <dialog> oder Vollbild-Videos).

dialog::backdrop {
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(5px);
}

Praktische Anwendungsszenarien​

1. Dekorative Icons und Symbole​

Ohne zusätzliche HTML-Elemente, reine CSS-Implementierung:

.success::before {
  content: '✓';
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: green;
  color: white;
  border-radius: 50%;
  text-align: center;
  margin-right: 8px;
}

Anwendungsfall: Wenn man keine rein dekorativen Elemente im HTML hinzufügen möchte.

2. Clearfix (Float-Bereinigung)​

Die klassische Float-Bereinigungstechnik:

.clearfix::after {
  content: '';
  display: table;
  clear: both;
}

Anwendungsfall: Wenn das Elternelement gefloatete Kindelemente enthält und die Höhe des Elternelements expandiert werden muss.

3. Anführungszeichen-Dekoration​

Automatisch Anführungszeichen zu zitiertem Text hinzufügen:

blockquote::before {
  content: open-quote;
  font-size: 2em;
  color: #ccc;
}

blockquote::after {
  content: close-quote;
  font-size: 2em;
  color: #ccc;
}

blockquote {
  quotes: '"' '"' '' ' ' '';
}

Anwendungsfall: Zitatblöcke verschönern, ohne manuell Anführungszeichen einzugeben.

4. Reine CSS-Formen​

Pseudo-Elemente nutzen, um geometrische Formen zu erstellen:

.arrow {
  position: relative;
  width: 100px;
  height: 40px;
  background: #3498db;
}

.arrow::after {
  content: '';
  position: absolute;
  right: -20px;
  top: 0;
  width: 0;
  height: 0;
  border-left: 20px solid #3498db;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}

Anwendungsfall: Pfeile, Dreiecke und andere einfache Formen ohne Bilder oder SVG erstellen.

5. Pflichtfeld-Markierung​

Roten Stern zu Pflichtfeldern im Formular hinzufügen:

.required::after {
  content: ' *';
  color: red;
  font-weight: bold;
}

Anwendungsfall: Pflichtfelder kennzeichnen und dabei die HTML-Semantik sauber halten.

Automatisch Symbol für externe Links hinzufügen:

a[href^='http']::after {
  content: ' 🔗';
  font-size: 0.8em;
  opacity: 0.6;
}

/* Oder mit Icon Font */
a[target='_blank']::after {
  content: '\f08e'; /* Font Awesome Externer-Link-Symbol */
  font-family: 'FontAwesome';
  margin-left: 4px;
}

Anwendungsfall: Die Benutzererfahrung verbessern, indem der Benutzer weiß, dass ein neuer Tab geöffnet wird.

7. Zähler-Nummerierung​

CSS-Zähler für automatische Nummerierung verwenden:

.faq-list {
  counter-reset: faq-counter;
}

.faq-item::before {
  counter-increment: faq-counter;
  content: 'Q' counter(faq-counter) '. ';
  font-weight: bold;
  color: #3498db;
}

Anwendungsfall: Automatisch Nummerierungen generieren, ohne manuelle Pflege.

8. Overlay-Effekt​

Hover-Overlay für Bilder hinzufügen:

.image-card {
  position: relative;
}

.image-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0);
  transition: background 0.3s;
}

.image-card:hover::after {
  background: rgba(0, 0, 0, 0.5);
}

Anwendungsfall: Wenn man keine zusätzlichen HTML-Elemente für Overlay-Effekte hinzufügen möchte.

Pseudo-Elemente vs Pseudo-Klassen​

EigenschaftPseudo-Elemente (::)Pseudo-Klassen (:)
SyntaxDoppelpunkt ::beforeEinzelpunkt :hover
FunktionErstellen/Auswählen bestimmter ElementteileAuswählen bestimmter Elementzustände
Beispiele::before, ::after, ::first-letter:hover, :active, :nth-child()
DOMExistieren nicht im DOMWählen tatsächliche DOM-Elemente aus

Häufige Fallstricke​

1. Die content-Eigenschaft muss vorhanden sein​

::before und ::after müssen die Eigenschaft content haben, andernfalls werden sie nicht angezeigt:

/* Wird nicht angezeigt */
.box::before {
  width: 20px;
  height: 20px;
  background: red;
}

/* Korrekt */
.box::before {
  content: ''; /* Auch ein leerer String muss hinzugefügt werden */
  display: block;
  width: 20px;
  height: 20px;
  background: red;
}

2. Kann nicht für ersetzte Elemente verwendet werden​

Bestimmte Elemente (wie <img>, <input>, <iframe>) können ::before und ::after nicht verwenden:

/* Ungültig */
img::before {
  content: 'Photo:';
}

/* Verwenden Sie ein Wrapper-Element */
.image-wrapper::before {
  content: 'Photo:';
}

3. Standardmäßig inline-Elemente​

::before und ::after sind standardmäßig inline-Elemente. Beim Setzen von Breite und Höhe ist Vorsicht geboten:

.box::before {
  content: '';
  display: block; /* oder inline-block */
  width: 100px;
  height: 100px;
}

4. z-index Schichtungsprobleme​

Der z-index des Pseudo-Elements ist relativ zum Elternelement:

.parent {
  position: relative;
}

.parent::before {
  content: '';
  position: absolute;
  z-index: -1; /* Liegt unter dem Elternelement, aber über dessen Hintergrund */
}

5. Rückwärtskompatibilität mit einzelnem Doppelpunkt​

Die CSS3-Spezifikation verwendet doppelte Doppelpunkte :: zur Unterscheidung von Pseudo-Elementen und Pseudo-Klassen, aber einzelne Doppelpunkte : funktionieren weiterhin (Rückwärtskompatibilität mit CSS2):

/* CSS3-Standardschreibweise (empfohlen) */
.box::before {
}

/* CSS2-Schreibweise (funktioniert weiterhin) */
.box:before {
}

Interview-Schwerpunkte​

  1. Doppelpunkt-Syntax der Pseudo-Elemente: Unterscheidung von Pseudo-Elementen :: und Pseudo-Klassen :
  2. Die content-Eigenschaft muss vorhanden sein: Schlüssel für ::before und ::after
  3. Nicht im DOM: Können nicht direkt von JavaScript ausgewählt oder manipuliert werden
  4. Nicht verwendbar für ersetzte Elemente: <img>, <input> usw. funktionieren nicht
  5. Praktische Anwendungsszenarien: Dekorative Icons, Clearfix, Formenzeichnung usw.

Reference​