CSS mit Adi Prinz

Einführung in Pseudoelemente

Pseudoelemente ermöglichen es, bestimmte Teile eines Elements auszuwählen oder zusätzliche Inhalte rein über CSS darzustellen. Dafür sind meist keine weiteren HTML-Elemente erforderlich.

Schreibweise

Pseudoelemente werden in der modernen CSS-Schreibweise mit zwei Doppelpunkten :: an einen Selektor angefügt.

selektor::pseudoelement {
  eigenschaft: wert;
}

Beispielsweise kann die erste Zeile eines Absatzes formatiert werden:

p::first-line {
  font-weight: 700;
  color: #6f42c1;
}

Pseudoklassen und Pseudoelemente unterscheiden

Merkmal	Pseudoklasse	Pseudoelement
Schreibweise	Ein Doppelpunkt: `:`	Zwei Doppelpunkte: `::`
Aufgabe	Wählt ein Element anhand seines Zustands, seiner Position oder einer bestimmten Bedingung aus.	Wählt einen bestimmten Teil eines Elements aus oder erzeugt einen zusätzlichen stilisierbaren Bereich.
Beispiele	`:hover`, `:checked`, `:first-child`	`::before`, `::marker`, `::first-line`

a:hover {
  color: #dc3545;
}

p::first-line {
  font-weight: 700;
}

:hover beschreibt einen Zustand des Links. ::first-line wählt dagegen die erste dargestellte Zeile eines Absatzes aus.

Ein oder zwei Doppelpunkte?

Ältere Pseudoelemente wurden früher auch mit nur einem Doppelpunkt geschrieben, beispielsweise :before oder :first-line. Browser unterstützen diese ältere Schreibweise meist weiterhin.

/* Ältere Schreibweise */
p:first-line {
  font-weight: 700;
}

/* Moderne Schreibweise */
p::first-line {
  font-weight: 700;
}

Für neuen CSS-Code sollte die moderne Schreibweise mit zwei Doppelpunkten verwendet werden. Dadurch sind Pseudoelemente sofort von Pseudoklassen unterscheidbar.

Erster Überblick

Pseudoelement	Aufgabe
`::before`	Erzeugt einen zusätzlichen Bereich vor dem Inhalt.
`::after`	Erzeugt einen zusätzlichen Bereich nach dem Inhalt.
`::first-letter`	Wählt den ersten Buchstaben eines Textblocks aus.
`::first-line`	Wählt die erste dargestellte Textzeile aus.
`::selection`	Gestaltet vom Benutzer markierten Text.
`::marker`	Gestaltet Aufzählungszeichen und Listennummern.
`::placeholder`	Gestaltet den Platzhaltertext eines Eingabefeldes.
`::file-selector-button`	Gestaltet die Schaltfläche eines Datei-Eingabefeldes.

::before und ::after

Die Pseudoelemente ::before und ::after erzeugen zusätzliche stilisierbare Bereiche vor beziehungsweise nach dem eigentlichen Inhalt eines Elements. Dafür muss kein zusätzliches HTML-Element eingefügt werden.

Die content-Eigenschaft

Damit ::before oder ::after dargestellt werden, benötigen sie in der Regel die CSS-Eigenschaft content.

selektor::before {
  content: "Inhalt davor";
}

selektor::after {
  content: "Inhalt danach";
}

Dieser Text steht im eigentlichen HTML-Element.

Mögliche Werte für content

Wert	Bedeutung	Beispiel
Text	Fügt einen angegebenen Text ein.	`content: "Neu";`
Leerer Inhalt	Erzeugt einen leeren Bereich, der beispielsweise als Form oder Dekoration gestaltet werden kann.	`content: "";`
`attr()`	Liest den Wert eines HTML-Attributs aus.	`content: attr(data-info);`
`url()`	Fügt eine externe Ressource wie ein Bild ein.	`content: url("icon.svg");`
`none`	Das Pseudoelement wird nicht erzeugt.	`content: none;`

Text und Symbole hinzufügen

Mit ::before und ::after können kurze Hinweise, Symbole oder dekorative Zeichen ergänzt werden.

Neues Lernbeispiel

Weitere Informationen

.pseudo-label-example::before {
  content: "NEU";
  margin-right: 0.75rem;
  padding: 0.2rem 0.5rem;
  border-radius: 0.25rem;
  background-color: #6f42c1;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
}

.pseudo-link-example a::after {
  content: " →";
}

Der Text „NEU“ und der Pfeil stehen nicht im HTML. Sie werden ausschließlich durch CSS erzeugt.

Attributwerte mit attr() auslesen

Die Funktion attr() übernimmt den Wert eines HTML-Attributs und gibt ihn über die Eigenschaft content aus.

Zusatzinformation

<div
  class="pseudo-info-example"
  data-info="Dieses Beispiel verwendet ein data-Attribut."
>
  Zusatzinformation
</div>

.pseudo-info-example::after {
  content: " – " attr(data-info);
  color: #6f42c1;
  font-style: italic;
}

Dekorative Elemente erstellen

Wird für content eine leere Zeichenfolge verwendet, kann das Pseudoelement als rein dekorative Form gestaltet werden.

Pseudoelemente gestalten

.pseudo-heading-example {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.pseudo-heading-example::before {
  content: "";
  width: 0.4rem;
  height: 2rem;
  border-radius: 0.2rem;
  background-color: #6f42c1;
}

Pseudoelemente positionieren

Pseudoelemente können mit position: absolute frei innerhalb ihres Bezugselements positioniert werden. Das Bezugselement erhält dafür normalerweise position: relative.

CSS-Lernkarte

Diese Karte besitzt ein dekoratives Pseudoelement in der oberen rechten Ecke.

.pseudo-card-example {
  position: relative;
  overflow: hidden;
  padding: 1.5rem;
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
}

.pseudo-card-example::after {
  content: "";
  position: absolute;
  top: -2rem;
  right: -2rem;
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  background-color: rgba(111, 66, 193, 0.2);
}

Hinweis zur Barrierefreiheit

Inhalte, die mit ::before oder ::after eingefügt werden, sollten hauptsächlich dekorativ sein. Wichtige Informationen gehören in das HTML, damit sie zuverlässig von Screenreadern und anderen Hilfstechnologien erfasst werden.

Pflichtangaben, wichtige Bedienhinweise und aussagekräftige Beschriftungen dürfen nicht ausschließlich über die Eigenschaft content bereitgestellt werden.

Pseudoelemente

CSS Module

css mit Adi Prinz