CSS-Kurs / Pseudoelemente: ::before und ::after

CSS-Pseudo-Elemente stylen einen bestimmten Teil eines Elements oder erstellen eine rein präsentationsbezogene Box. ::before und ::after können dekorative Inhalte hinzufügen, aber wesentliche Informationen sollten im HTML verbleiben und nicht auf generierten Inhalten basieren.

Unterscheiden Sie zwischen Pseudo-Klassen und Pseudo-Elementen

Die im Abschnitt Kombinatoren und Pseudoklassen beschriebenen Pseudoklassen wählen aus, in welchem Zustand oder unter welchen Bedingungen sich ein vorhandenes Element befindet. a:hover richtet sich auf den Link selbst, über den die Maus bewegt wird. Ein Pseudo-Element richtet sich auf einen bestimmten Teil des Elements oder dessen erstellte Darstellung. a::after dekoriert ein Pseudo-Element, das nach dem Inhalt des Links erzeugt wird. In neuem Code sollte man für Pseudo-Klassen einen Doppelpunkt und für Pseudo-Elemente zwei Doppelpunkte verwenden, um es einfacher zu machen, die beiden zu unterscheiden.

a:hover { color: #1d4ed8; }
a::after { content: ""; }

before und after fügen keine tatsächlichen HTML-Geschwister-Tags außerhalb des ausgewählten Elements hinzu. Sie erzeugen Darstellungsboxen vor beziehungsweise nach dem Inhalt des ausgewählten Elements. Entwickler-Tools können Pseudo-Elemente als separate Zeilen anzeigen, aber dies ist nicht dasselbe, als wenn Spans im ursprünglichen HTML geschrieben würden. Sie können nicht einfach Pseudo-Elemente abrufen, die von Code erstellt wurden, der nach gängigen Kindelementen sucht.

Verstehen Sie content und display

h1::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  background-color: currentColor;
}

content: "" erstellt ein Pseudo-Element ohne Text. Auch wenn der Inhalt leer ist, kann es als dekorative Box erscheinen, wenn Sie ihm einen Hintergrund und eine Größe geben. Andererseits, wenn die Eigenschaft content weggelassen oder in none geändert wird, wird dieses Pseudo-Element nicht erstellt und der Punkt erscheint nicht, selbst wenn Größe und Hintergrund hinzugefügt werden.

Die Standardanzeige von ::before und ::after ist inline. Verwenden Sie inline-block für einen dekorativen Punkt, der eine explizite Breite und Höhe benötigt, und block für eine Linie unter dem Inhalt. Bei diesen Pseudo-Elementen verhindert das Weglassen von content oder das Setzen auf none die erzeugte Box. Für weitere Details siehe display: block, inline, inline-block und Ausblenden. Siehe MDN: ::before.

currentColor ist ein Schlüsselwort, das auf den Farbwert des Elements verweist, das heißt auf die aktuelle Textfarbe. Wenn Sie den Titel von Grün auf Blau ändern, verwendet auch der Hintergrund des Pseudo-Elements die gleiche Farbe. border-radius: 50% rundet die Ecken von Kästen gleicher Breite und Höhe, sodass sie wie Kreise aussehen. margin-right ist der Außenabstand zwischen Punkten und Buchstaben.

Fügen Sie einen Punkt vor einer Überschrift und eine Linie nach einem Link hinzu

Das folgende vollständige Beispiel erstellt einen 12px-Punkt vor dem Titel und eine 2px-Linie unter dem Link. Es lässt auch die Standard-Unterstreichung des Links selbst bestehen, sodass die Trennung des Links erhalten bleibt, selbst wenn die zusätzliche Linie wegfällt. Beim Überfahren mit der Maus oder beim Tastaturfokus werden die dekorativen Linien auf 4px dicker.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Small Garden</title>
  <style>
body { margin: 24px; font-family: sans-serif; line-height: 1.7; color: #333; }
    h1 { color: #087f5b; font-size: 30px; }
    h1::before {
      content: "";
      display: inline-block;
      width: 12px;
      height: 12px;
      margin-right: 10px;
      border-radius: 50%;
      background-color: currentColor;
    }
    a { display: inline-block; color: #087f5b; text-decoration: underline; }
    a::after {
      content: "";
      display: block;
      height: 2px;
      margin-top: 4px;
      background-color: currentColor;
    }
    a:hover::after, a:focus-visible::after { height: 4px; }
    a:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 4px; }
  </style>
</head>
<body>
<h1>Small Garden</h1>
  <p>We open at 9 a.m. every day.</p>
  <a href="#visit">Visitor Information</a>
  <h2 id="visit">What to bring</h2>
  <p>Bring a water bottle and comfortable shoes.</p>
</body>
</html>

Speichern Sie es als index.html und führen Sie es aus. Der Titel behält den tatsächlichen Text „Small Garden“ bei, und der Kreis davor ist eine CSS-Dekoration. Der Link trägt auch den Namen „Visitor Information“ und ein im HTML festgelegtes Linkziel. a:hover::after ist ein Ausdruck, der das Pseudoelement ::after eines Links im Hover-Zustand auswählt. Lange Notationen erscheinen weniger kompliziert, wenn Sie sie getrennt nach der Anzahl der Doppelpunkte und der Auswahlreihenfolge lesen.

Das Diagramm zeigt dasselbe HTML mit und ohne die dekorativen Pseudo-Elemente. Der Text und das Ziel des Links bleiben unverändert. Im vollständigen Beispiel ist die dekorative Linklinie standardmäßig 2px hoch und wird bei Hover oder sichtbarem Tastaturfokus 4px hoch.

Behalten Sie wichtige Informationen im HTML

Verschiedene Screenreader und Browser können generierte Inhalte unterschiedlich ausgeben, daher sollte man sich nicht darauf verlassen, wesentliche Informationen nur in Pseudo-Elementen unterzubringen. Es ist klarer, die Bedingungen im tatsächlichen Label oder in dem Anleitungssatz zu schreiben, als die Eingabebedingungen mit content: "Required" zu informieren. Allein die Tatsache, dass ein Pseudo-Element sichtbar ist, bestätigt dessen Barrierefreiheit nicht.

Es ist besser, sich nicht auf die allgemeine Dekorationsimplementierung zu verlassen, die vor und nach Elementen, die externen Inhalt anzeigen, wie img, hinzugefügt wird. Wenden Sie sie auf Elemente an, die Inhalt enthalten, wie h1 oder a, wie in diesem Beispiel. Wenn Sie Dekoration um das Bild herum benötigen, könnten Sie in Betracht ziehen, ein separates HTML-Element um das Bild herum zu haben und die Pseudo-Elemente dieses Elements zu dekorieren.

Prüfen Sie fehlende Pseudoelemente

1. Ersetzen Sie content: ""; in h1::before durch content: none;. Der Titeltext sollte gleich bleiben, aber nur der Punkt sollte verschwinden. Nach Bestätigung stellen Sie ihn auf einen leeren String zurück.
2. Ersetzen Sie display: inline-block; im Punkt durch display: inline;. Beachten Sie, dass Inline-Dekorationen ohne Text den ursprünglichen 12px-Punkt nicht nur mit Breite·Höhe beibehalten können. Stellen Sie display wieder auf inline-block zurück.
3. Ändern Sie die Farbe von h1 zu #1d4ed8. Stellen Sie sicher, dass die Punkte ebenfalls blau gefärbt sind und die Links grün bleiben. currentColor bezieht sich nicht auf eine einzelne Farbe auf der gesamten Seite.
4. Bewegen Sie die Maus über den Link und prüfen Sie, ob die Linie dicker wird. Bewegen Sie die Maus weg und verwenden Sie Tab, um den Fokus auf den Link zu verschieben, und prüfen Sie, ob Linie und Umriss zusammen sichtbar sind.

Beim Überprüfen sollte man zuerst prüfen, ob der Selektor mit dem tatsächlichen Element übereinstimmt und ob der Inhalt gültig ist, und dann auf Anzeige, Größe und Hintergrund achten. Wenn man die Höhe der Linklinie auf 0 ändert, wird die Linie nicht sichtbar sein, aber das als Inhalt erstellte Pseudo-Element verschwindet nicht unbedingt. Die Unterscheidung zwischen „das Element wurde nicht erstellt“ und „es wurde erstellt, hat aber keinen Zeichenbereich“ kann helfen, die Ursache des Fehlers einzugrenzen.

Nach der Übung die ursprünglichen Werte wiederherstellen und speichern. Pseudo-Elemente können Dekorationen liefern, ohne zusätzliche HTML-Elemente zu verwenden, aber wesentlicher Inhalt muss unabhängig von dieser Dekoration verfügbar bleiben. Beginnen Sie mit einem Punkt oder einer Linie und prüfen Sie, dass der tatsächliche Text, das Linkziel und das Tastaturverhalten intakt bleiben.