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 Pseudoelemente im Überblick

  • ::beforezusätzlicher Inhalt davor
  • ::afterzusätzlicher Inhalt danach
  • ::first-lettererster Buchstabe
  • ::first-lineerste Zeile
  • ::selectionmarkierter Text
  • ::markerListen-Marker

Praxis Beispiele

1. ::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;
}

Beispiel 4 – Bild-Scrim für Textlesbarkeit

Ein praktischer Anwendungsfall: über einem Bild soll Text lesbar sein, ohne das Bild selbst abzudunkeln. Ein ::after legt einen Farbverlauf über das ganze Bild (position: absolute; inset: 0;), der Titel bekommt z-index: 1, damit er über dem Verlauf bleibt.

Pedalo auf einem See

Sommerferien

.scrim-card {
    position: relative;
}

.scrim-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.75), transparent 60%);
}

.scrim-card h4 {
    position: absolute;
    z-index: 1;
    left: 1rem;
    bottom: 1rem;
    color: white;
}

Wichtig: Der Container braucht position: relative, damit sich inset: 0 auf ihn bezieht. Und der Titel braucht z-index: 1 – sonst landet das später erzeugte ::after optisch über dem Text.

Beispiel 5 – content: attr()

Statt Text fix im CSS zu hinterlegen, kann content auch den Wert eines HTML-Attributs auslesen. So bekommt jedes Element automatisch seinen eigenen Text, ohne dass die CSS-Regel für jedes Element einzeln wiederholt werden muss.

<div class="row">
  <div class="col s12 m4">
    <div class="tile" data-label="Kachel A ansehen"></div>
  </div>
  <div class="col s12 m4">
    <div class="tile" data-label="Kachel B ansehen"></div>
  </div>
  <div class="col s12 m4">
    <div class="tile" data-label="Kachel C ansehen"></div>
  </div>
</div>
.tile::after {
    content: attr(data-label);
}

.tile:hover::after {
    opacity: 1;
}

Wichtig: attr() liefert nur reinen Text, keine Bilder oder berechneten Werte. Für individuellen Text pro Element, ganz ohne JavaScript oder doppelten CSS-Code, ist es aber genau das richtige Werkzeug.

2. ::first-letter

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

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

3. ::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.

4. ::selection

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

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

5. ::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

Weitere Pseudoelemente

Neben den "Klassikern" oben gibt es noch weitere Pseudoelemente, die im Alltag nützlich sind:

  • ::placeholderPlatzhaltertext in Formularfeldern
  • ::backdropHintergrund hinter <dialog> / Fullscreen-Elementen
  • ::file-selector-buttonButton von <input type="file">
  • ::part()Elemente in einem Shadow Tree mit passendem part-Attribut
  • ::slotted()Elemente, die in einen <slot> eingefügt wurden

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

Nurse Siehe auch Pseudoklassen.