CSS - Pseudo-Elemente

Hallo da draußen, zukünftige CSS-Zauberer! Heute begeben wir uns auf eine aufregende Reise in die magische Welt der CSS-Pseudo-Elemente. Als dein freundlicher Nachbarschafts-Computerlehrer bin ich begeistert, dich durch dieses Abenteuer zu führen. Also, hol dir deine virtuellen Zauberstäbe (Tastaturen) und tauchen wir ein!

Überblick

Stelle dir vor, du dekorierst ein Zimmer. Du hast dein Mobiliar (HTML-Elemente) an Ort und Stelle, aber du möchtest ein bisschen mehr Flair hinzufügen, ohne das Mobiliar selbst zu verändern. Genau hier kommen die Pseudo-Elemente ins Spiel! Sie sind wie magische Dekorationen, die du deinen HTML-Elementen hinzufügen kannst, ohne actually das HTML zu verändern.

Syntax

Bevor wir anfangen, Zauber zu wirken (Code zu schreiben), lernen wir die Beschwörungsformel (Syntax):

auswahl::pseudo-element {
eigenschaft: wert;
}

Beachte die doppelten Doppelpunkte (::)? Das ist unser Zauberstab! Er sagt dem Browser: "Hey, ich bin gleich dabei, etwas Besonderes zu erschaffen!"

CSS ::after Pseudo-Element

Lassen wir mit dem ::after Pseudo-Element beginnen. Es ist wie ein magischer Assistent, der deinem Element folgt und zusätzliches Inhalt trägt.

.magic-box::after {
content: "?";
margin-left: 5px;
}

In diesem Beispiel wird jedes Element mit der Klasse "magic-box" durch ein Zylinderhut-Emoji direkt danach begleitet. Es ist, als hättest du einen Hasen (oder in diesem Fall, einen Hut) aus deinem CSS-Zauberhut gezogen!

CSS ::before Pseudo-Element

Wenn ::after der Assistent ist, der deinem Element folgt, dann ist ::before derjenige, der den Weg weist. Es fügt Inhalt vor deinem Element hinzu.

.wizards-name::before {
content: "?‍♂️ ";
}

Jetzt hat jeder Zauberername ein Zauberer-Emoji davor. Abrakadabra!

CSS ::first-letter Pseudo-Element

Möchtest du deinen Text aussehen lassen wie eine alte magische Rolle? ::first-letter ist dein Zauber!

p::first-letter {
font-size: 2em;
color: #8A2BE2;
float: left;
margin-right: 5px;
}

Das macht die erste Buchstabe jedes Absatzes größer, lila und schwebt nach links. Es ist, als hättest du einen magischen Schreiber, der deine Manuskripte illuminieren würde!

CSS ::first-line Pseudo-Element

Ähnlich wie ::first-letter, aber für die gesamte erste Zeile des Textes.

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

Jetzt ist die erste Zeile jedes Absatzes fett und indigo. Es ist, als hättest du den wichtigsten Teil deiner magischen Rolle hervorgehoben!

CSS ::selection Pseudo-Element

Hast du jemals wanted, wie markierter Text aussehen soll? ::selection ist dein Zauber dafür!

::selection {
background-color: #FFD700;
color: #000000;
}

Jetzt, wenn du Text auf deiner Seite auswählst, hat er einen goldenen Hintergrund mit schwarzer Schrift. Es ist, als hättest du deinen Cursor in König Midas verwandelt!

Mehrere Pseudo-Elemente

Du kannst mehrere Pseudo-Elemente auf einem einzelnen Element verwenden. Es ist wie das Schichten von Zaubern für zusätzlichen magischen Effekt!

.magical-quote::before,
.magical-quote::after {
content: '"';
font-size: 2em;
color: #FF1493;
}

Dies fügt Anführungszeichen vor und nach Elementen mit der Klasse "magical-quote" hinzu, was sie wie mystische Prophezeiungen hervorhebt!

Pseudo-Elemente Methoden Tabelle

Hier ist ein praktisches Zauberbuch (Tabelle) aller Pseudo-Elemente-Methoden, die wir gelernt haben:

Pseudo-Element	Beschreibung	Beispiel
::after	Fügt Inhalt nach dem Element hinzu	.element::after { content: "?"; }
::before	Fügt Inhalt vor dem Element hinzu	.element::before { content: "?‍♂️"; }
::first-letter	Stylisiert die erste Buchstabe des Textes	p::first-letter { font-size: 2em; }
::first-line	Stylisiert die erste Zeile des Textes	p::first-line { font-weight: bold; }
::selection	Stylisiert markierten Text	::selection { background-color: gold; }

Denke daran, junge Zauberer, die Macht der Pseudo-Elemente liegt in ihrer Fähigkeit, Stil und Inhalt hinzuzufügen, ohne dein HTML zu verwirren. Sie sind wie unsichtbare Helfer, die immer da sind, wenn du sie brauchst, aber nie im Weg sind.

Als wir unsere magische CSS-Reise beenden, hoffe ich, dass du inspiriert bist, mit diesen Pseudo-Elementen zu experimentieren. Habe keine Angst, sie zu mischen und zu kombinieren, zu schichten und zu kombinieren. Die einzige Grenze ist deine Fantasie!

In meinen Jahren des Unterrichtens habe ich seen Studenten unglaubliche Dinge mit diesen einfachen Werkzeugen schaffen. Ein Student hat sogar ein virtuelles Aquarium mit Fischen (::before und ::after Elemente) geschaffen, die über den Bildschirm schwimmen!

Also, zieh deine CSS-Zauberstäbe hoch und erschaffe deine eigene Magie. Und denke daran, in der Welt der Web-Entwicklung bist du nie zu alt, um an ein bisschen Magie zu glauben. Frohes Coden und möge deine Stylesheets immer bugfrei sein!

Credits: Image by storyset