Pseudoelemente

5.1 Grundlegende Pseudoelemente

Pseudoelemente in CSS ermöglichen es Entwicklern, Stile und Inhalte zu Teilen des Dokuments hinzuzufügen, die mit normalen Selektoren nicht markiert werden können. Sie erstellen "virtuelle" Elemente, die so gestylt werden können, als wären sie Teil des HTML-Markups. Das ist ein mächtiges Werkzeug für die Erstellung komplexer Layouts und die Verbesserung des Aussehens von Webseiten.

Was sind Pseudoelemente

Pseudoelemente sind Schlüsselwörter, die Selektoren hinzugefügt werden, um bestimmte Teile von Elementen zu stylen. Sie erstellen virtuelle Elemente, die Teil des visuellen Designs werden, aber das ursprüngliche HTML-Markup nicht ändern. Pseudoelemente werden normalerweise verwendet, um die ersten Buchstaben, Textzeilen, dekorative Elemente und andere Aufgaben zu stylen.

Grundlegende Pseudoelemente

Einige der am häufigsten verwendeten Pseudoelemente sind:

• ::before: fügt Inhalt vor dem Inhalt des ausgewählten Elements hinzu
• ::after: fügt Inhalt nach dem Inhalt des ausgewählten Elements hinzu
• ::first-letter: stylt den ersten Buchstaben eines Elements
• ::first-line: stylt die erste Zeile eines Elements
• ::selection: stylt den vom Nutzer ausgewählten Text

Wie man Pseudoelemente verwendet

Pseudoelemente in CSS werden mit doppeltem Doppelpunkt (::) gekennzeichnet, obwohl einige Pseudoelemente auch die alte Einkolon-Notation (:) für Abwärtskompatibilität unterstützen.

Syntax:

    
      selector::pseudoelement {
        eigenschaft: wert;
        eigenschaft: wert;
        eigenschaft: wert;
        ...
      }
    
  

5.2 Beispiele für die Verwendung von Pseudoelementen

1. Hinzufügen von dekorativen Elementen

Pseudoelemente werden häufig verwendet, um dekorative Elemente vor oder nach dem Inhalt eines Elements hinzuzufügen:

    
      /* Hinzufügen eines Symbols vor dem Linktext */

      a::before {
        content: "🔗";
        margin-right: 5px;
      }

      /* Hinzufügen eines dekorativen Elements nach dem Absatz */

      p::after {
        content: "❦";
        display: block;
        text-align: right;
        color: red;
      }
    
  

In diesen Beispielen werden die Pseudoelemente ::before und ::after verwendet, um ein Symbol vor dem Linktext und ein dekoratives Element nach dem Absatz hinzuzufügen.

2. Stylen der ersten Buchstaben und Zeilen

Pseudoelemente können verwendet werden, um die ersten Buchstaben oder Zeilen eines Textes zu stylen, was häufig in der Typografie angewendet wird:

    
      /* Stylen des ersten Buchstabens eines Absatzes */

      p::first-letter {
        font-size: 2em;
        font-weight: bold;
        color: #3498db;
      }

      /* Stylen der ersten Zeile eines Absatzes */

      p::first-line {
        font-weight: bold;
        color: #e74c3c;
      }
    
  

In diesen Beispielen werden die Pseudoelemente ::first-letter und ::first-line verwendet, um den ersten Buchstaben und die erste Zeile eines Absatzes zu stylen.

3. Hervorheben von Text

Das Pseudoelement ::selection wird verwendet, um den Text zu stylen, der vom Benutzer ausgewählt wurde:

    
      /* Stylen des hervorgehobenen Textes */

      ::selection {
        background-color: #3498db;
        color: white;
      }
    
  

In diesem Beispiel hat der vom Benutzer ausgewählte Text einen blauen Hintergrund und weiße Schriftfarbe.

5.3 Besonderheiten und Einschränkungen von Pseudoelementen

Einschränkungen:

• Nur einmalige Nutzung: Pseudoelemente ::before und ::after können nur einmal auf jedem Element verwendet werden
• Erfordernis von content: Pseudoelemente ::before und ::after erfordern die Verwendung der Eigenschaft content, auch wenn sie leer ist
• Browserkompatibilität: Moderne Browser unterstützen den doppelten Doppelpunkt zur Kennzeichnung von Pseudoelementen, aber für ältere Pseudoelemente funktioniert auch ein einzelner Doppelpunkt

Beispiel für die Verwendung der Eigenschaft content

    
      /* Beispiel für die Verwendung eines leeren Pseudoelements für ein dekoratives Element */

      div::before {
        content: "";
        display: block;
        width: 100%;
        height: 10px;
        background-color: #3498db;
      }
    
  

In diesem Beispiel wird ein leeres Pseudoelement ::before verwendet, um einen dekorativen Streifen vor dem Inhalt eines div hinzuzufügen.