Wie Sie CSS-Pseudo-Elemente (before & after) richtig nutzen

CSS Pseudo-Elemente sind eine mächtige Funktion in CSS, die es Entwicklern ermöglicht, Elemente selektiv zu gestalten und zusätzliche visuelle Effekte hinzuzufügen.

Sie ermöglichen es, bestimmte Teile eines Elements auszuwählen und zu gestalten, ohne HTML-Tags oder zusätzliche HTML-Strukturen hinzufügen zu müssen.

::Before

Das ::before-Pseudo-Element fügt dem Element, auf das es angewendet wird, Inhalte ein. Es wird normalerweise verwendet, um dekorative Inhalte wie Schatten oder Icons hinzuzufügen. Der folgende Code zeigt, wie man einem Element ein Icon mithilfe von ::before hinzufügt:

.button::before {
  content: url(icon.png);
}

::after

Das ::after-Pseudo-Element fügt dem Element, auf das es angewendet wird, Inhalte am Ende hinzu. Es wird normalerweise verwendet, um dekorative Inhalte wie Pfeile oder Zeilenumbrüche hinzuzufügen. Der folgende Code zeigt, wie man einem Element ein Pfeil-Icon am Ende mithilfe von ::after hinzufügt:

.link::after {
  content: url(arrow.png);
}

::first-line

Das ::first-line-Pseudo-Element ermöglicht es Entwicklern, die Formatierung der ersten Zeile eines Textabschnitts zu ändern. Der folgende Code zeigt, wie man die Farbe und Größe der ersten Zeile eines Absatzes ändert:

p::first-line {
  color: blue;
  font-size: 24px;
}

::first-letter

Das ::first-letter-Pseudo-Element ermöglicht es Entwicklern, die Formatierung des ersten Buchstabens eines Textabschnitts zu ändern. Der folgende Code zeigt, wie man die Farbe und Größe des ersten Buchstabens eines Absatzes ändert:

p::first-letter {
  color: red;
  font-size: 48px;
}

::selection

Das ::selection-Pseudo-Element ermöglicht es Entwicklern, die Formatierung von ausgewähltem Text auf einer Webseite zu ändern. Der folgende Code zeigt, wie man die Hintergrundfarbe des ausgewählten Textes in Blau ändert:

::selection {
  background-color: blue;
}

Fazit

CSS Pseudo-Elemente bieten Entwicklern eine mächtige Möglichkeit, zusätzliche visuelle Effekte und Dekorationen zu einem Element hinzuzufügen, ohne dass HTML-Strukturen geändert werden müssen.

Die oben genannten CSS Pseudo-Elemente sind nur einige Beispiele für die vielen Möglichkeiten, die sie bieten.