CSS Pseudoelemente

Pseudoelemente ermöglichen es, Teile eines Elements zu stylen (z.B. erster Buchstabe, erste Zeile oder zusätzlicher „virtueller“ Inhalt). Sie sind ideal für visuelle Details – nicht für semantisch relevante Inhalte.

---

Pseudo: Elemente & Klassen

Pseudoelemente vs. Pseudoklassen

• :hoverPseudoklasse: Zustand/Position („wann / welches Element?“)
• ::beforePseudoelement: Teil/Fragment („was für ein Teil?“)

Typische Einsätze: Marker, Icons, Labels, dekorative Elemente.
Merksatz: Pseudoklasse = welches Element? | Pseudoelement = welcher Teil?

Wichtig: :first-child / :nth-child() sind Pseudoklassen (wählen ein Element), nicht Pseudoelemente (stylen ein Fragment).

---

Syntax

Moderne Schreibweise: Doppelter Doppelpunkt ::. Das ist ein klarer Hinweis: Es geht um ein Fragment, nicht um einen Zustand.

p::first-letter { ... }
p::before { ... }

---

Die wichtigsten Pseudoelemente

::before und ::after

Erzeugen zusätzlichen, virtuellen Inhalt.
Dieser Inhalt existiert nicht im HTML. Auch wenn Text ausgegeben wird, ist dieser nicht anklickbar.
::before und ::after können mit CSS gestylt und positioniert werden.
Wichtig: Ohne content wird nichts angezeigt.

Beispiel 1

Ich bin ein Paragraph mit einem ::before Element. (HTML Emojis)

.hint::before {
    content: " \2603 ";
    font-size: 30px;
    color: blue;
}

Beispiel 2

Ich bin ein Paragraph mit einem ::before und einem ::after Element.

.wichtig::before {
    content: "\276F";
    color: red;
}
.wichtig::after {
    content: "\276E";
    color: red;
}

Beispiel 3

Ein ::after-Element kann über die content-Eigenschaft praktisch jede Art von Inhalt einfügen (Text, Bilder, Zitate, Attribute, Zähler) und wird dann mit normalen CSS-Eigenschaften gestylt.

.box::after{
    content: "";
    background: red;
    width: 50px;
    height: 50px;
    position: absolute;
    border-radius: 50%;
    right: -15px;
    top: -15px;
}

---

::first-letter

Gestaltet den ersten Buchstaben (typisch: Editorial / Einleitung).

.intro::first-letter {
  font-size: 2rem;
  color: teal;
}

---

::first-line

Gestaltet die erste Zeile. Die erste Zeile ist layout-abhängig: Ändert sich die Breite, kann sich auch die erste Zeile ändern.

p.demo::first-line {
    font-size: 1.5rem;
    color: yellowgreen;
    /* text-transform: uppercase; */ /* wird ignoriert */
}

Warum funktioniert text-transform: uppercase hier nicht?
::first-line darf nur Eigenschaften verwenden, die den Text nicht verändern. text-transform verändert den Textinhalt selbst und könnte dadurch den Zeilenumbruch verändern. Deshalb wird diese Eigenschaft vom Browser ignoriert.

Wichtig: ::first-line darf das Aussehen ändern – nicht den Text selbst.

---

::selection

Gestaltet markierten Text (rein visuell, kein DOM-Element).

::selection{
    background: indigo;
    color: white;
}

---

::marker

Das CSS-Pseudoelement ::marker wird verwendet, um die Markierungen von Listenelementen zu stylen. Dazu gehören standardmässig die Aufzählungspunkte (Bullets) bei ungeordneten Listen (<ul>) oder die Nummerierung bei geordneten Listen (<ol>).

1. HTML-Struktur
2. CSS anwenden
3. Testen

.steps li::marker {
 font-weight: bold;
 color: red;
}

Wichtig: ::marker erlaubt nur wenige CSS-Eigenschaften (z. B. color, font-size, font-weight). Layout-Eigenschaften wie margin oder position funktionieren nicht

---

Kurz gesagt

• ::before / ::after = zusätzlicher virtueller Inhalt (mit content)
• ::first-letter / ::first-line = typografische Fragmente
• ::selection = Markierung stylen
• :first-child / :nth-child() = Pseudoklassen (Position), nicht Pseudoelemente

---

Siehe auch Pseudoklassen

---