Pseudo-Elemente

Mit Pseudo-Elementen gestaltest du bestimmte Teile eines HTML-Elements oder fügst zusätzlichen Inhalt ein, ohne den HTML-Code zu verändern.

Syntax

Pseudo-Elemente werden mit zwei Doppelpunkten (::) geschrieben.

1selektor::pseudo-element {
2    /* CSS-Regeln */
3}

::before – etwas vor einem HTML-Element einfügen

::before fügt vor dem eigentlichen Inhalt eines Elements virtuellen Inhalt ein. Wichtig: Die Eigenschaft content ist Pflicht – ohne sie wird nichts angezeigt.

1<p>Hallo Welt</p>

1p::before {
2    content: "👉 ";
3}

::after – etwas hinter einem HTML-Element einfügen

::after funktioniert genauso wie ::before, fügt den Inhalt aber hinter dem Element ein. Auch hier ist content erforderlich.

1<p>Hallo Welt</p>

1p::after {
2    content: " 🚀";
3}

::first-letter – ersten Buchstaben auswählen

::first-letter wählt den ersten Buchstaben eines Textblocks aus. Damit lassen sich z. B. Initialen oder Drop Caps gestalten.

1<p>Willkommen auf meiner Webseite.</p>

1p::first-letter {
2    font-size: 35px;
3    color: red;
4}

::first-line – erste Zeile auswählen

::first-line wählt die erste Zeile eines Textblocks aus – unabhängig davon, wie breit das Element ist oder wie der Text umbricht.

1<p>Dies ist ein längerer Text. Pseudo-Elemente ermöglichen es, bestimmte Teile eines Elements gezielt zu gestalten – ohne den HTML-Code zu verändern.</p>

1p::first-line {
2    font-weight: bold;
3    color: blue;
4}

::selection – markierten Text gestalten

::selection stylt den Text, den der Benutzer mit der Maus markiert. Probiere es in der Ausgabe aus, indem du den Text anklickst und ziehst.

1<p>Markiere diesen Text mit der Maus.</p>

1p::selection {
2    background-color: yellow;
3    color: black;
4}

::placeholder – Platzhaltertext gestalten

::placeholder wählt den Hinweistext in Eingabefeldern aus, der angezeigt wird, solange noch nichts eingegeben wurde.

1<input type="text" placeholder="Dein Name" />

1input::placeholder {
2    color: gray;
3    font-style: italic;
4}

::marker – Listenpunkte gestalten

::marker stylt die Aufzählungszeichen oder Nummern von Listeneinträgen (<li>).

1<ul>
2    <li>Apfel</li>
3    <li>Banane</li>
4    <li>Orange</li>
5</ul>

1li::marker {
2    color: red;
3    font-size: 1.5em;
4}