Pseudo-Elemente

Der ::first-letter-Zauber verleiht deinem ersten Buchstaben besondere Aufmerksamkeit. Du kannst ihn hervorheben, größer machen oder ihn wie einen majestätischen Buchstaben in alten Manuskripten aussehen lassen. Es ist die perfekte Möglichkeit, den Leser in die Geschichte hineinzuziehen. Mit ::first-letter machst du aus einem einfachen Anfang ein episches Ereignis!

p::first-letter {
    font-size: 2em;
}

Dieses CSS vergrößert den ersten Buchstaben jedes Absatzes auf die doppelte Schriftgröße (2em) und hebt ihn visuell hervor.

Mit ::first-line verleihst du der ersten Zeile eines Textabschnitts einen ganz besonderen Zauber. Diese Pseudo-Elemente greifen sich die erste Zeile und verzaubern sie mit Farbe, Schriftgröße oder sogar einer speziellen Hintergrundfarbe. Ein bisschen wie das Einleitungsmantra eines Zauberers.

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

Dieses CSS gestaltet die erste Zeile jedes Absatzes fett und braun

::before ist wie ein treuer Diener, der vor deinem Element steht wie ein Vorbote, der vor dem eigentlichen Inhalt erscheint. Es fügt Inhalte hinzu, die im HTML nicht existieren, aber durch CSS erscheinen, als wären sie immer da gewesen.

h1::before {
    content: "★ ";
}

Dieses CSS fügt vor jedem <h1>-Element ein Sternsymbol ein, um den Titel visuell hervorzuheben.

Wenn ::before der Vorbote ist, dann ist ::after das, was nach dem großen Finale auf der Bühne bleibt. Es lässt Inhalte nach dem eigentlichen Text erscheinen, als ob ein Erzähler noch eine letzte Bemerkung hinterlässt.

h1::after {
    content: " ★";
}

Dieses CSS fügt nach jedem
<h1>-Element ein Sternsymbol hinzu, um den Titel optisch abzurunden.

Mit ::marker übernimmst du die Kontrolle über die Listenmarker. Warum sich mit gewöhnlichen Punkten oder Strichen be-gnügen, wenn du sie in leuchtende Symbole oder zauberhafte Farben verwandeln kannst?

ul li::marker {
    color: green;
    content: "→";
}

Dieses CSS gestaltet Listenpunkte grün und ersetzt sie durch Pfeile.

Wenn jemand auf deiner Seite Text auswählt, sollte er sich besonders fühlen. ::selection erlaubt es dir, die Markierung zu verzaubern, sodass sie in leuchtenden Farben erscheint, wenn jemand mit der Maus einen Text auswählt. Kein blasses Grau mehr, sondern knallige Zauberkraft! Mit ::selection wird das einfache Markieren von Text zu einer leuchtenden Offenbarung!

::selection {
    background: green;
    color: black;
}

Markierter Text erhält einen grünen Hintergrund und schwarze Schrift.