CSS generierte Inhalte

Das Modul CSS generierte Inhalte definiert, wie der Inhalt eines Elements ersetzt werden kann und wie Inhalte mit CSS zu einem Dokument hinzugefügt werden können.

Generierte Inhalte können für Inhaltsersetzung verwendet werden, wobei der Inhalt eines DOM-Knotens durch ein CSS <image> ersetzt wird. Das CSS-Modul für generierte Inhalte ermöglicht zudem das Generieren von sprachspezifischen Anführungszeichen, das Erstellen von benutzerdefinierten Listenelementnummern und -punkten sowie das visuelle Hinzufügen von Inhalten durch Generieren von Inhalten auf ausgewählten Pseudoelementen als anonyme ersetzte Elemente.

Generierte Inhalte in Aktion

<div></div>

body,
div {
  background-repeat: no-repeat;
}
body {
  background-image: linear-gradient(#3a67ab, #e8f6ff 100%);
}
div {
  position: relative;
  width: 400px;
  height: 400px;
  background-image:
    linear-gradient(
      115deg,
      transparent 48%,
      brown,
      #996600,
      brown,
      transparent 52%
    ),
    linear-gradient(
      60deg,
      transparent 48%,
      brown,
      #996600,
      brown,
      transparent 52%
    ),
    radial-gradient(
      circle 10px at 50% 50%,
      #333333 30%,
      #999999 50%,
      transparent 50%
    ),
    radial-gradient(
      circle 10px at 50% 50%,
      #333333 30%,
      #999999 50%,
      transparent 50%
    ),
    radial-gradient(circle at 50% 50%, white 30%, #eeeeee 50%, transparent 50%),
    radial-gradient(circle at 50% 50%, white 30%, #eeeeee 50%, transparent 50%),
    radial-gradient(circle at 50% 50%, white 30%, #eeeeee 50%, transparent 50%);
  background-size:
    100px 100px,
    100px 100px,
    15px 15px,
    15px 15px,
    200px 200px,
    300px 300px,
    400px 400px;
  background-position:
    95% 120px,
    5% 120px,
    46% 80px,
    54% 80px,
    50% 0,
    50% 90px,
    50% 220px;
}
div::after {
  content: "";
  border: transparent solid 4px;
  border-left: orange 30px solid;
  height: 1px;
  width: 1px;
  position: absolute;
  left: 50%;
  top: 100px;
}

div::before {
  content: "Only one <div>";
  font-size: min(6vh, 2rem);
  justify-content: center;
  display: flex;
  font-family: comic-sans, papyrus, sans-serif;
}

Das HTML für dieses Beispiel ist ein einzelnes, leeres <div> innerhalb eines ansonsten leeren <body>. Der Schneemann wurde mit CSS-Bildern und CSS-Hintergründen und -Rahmen erstellt. Die Karottennase wurde mit generierten Inhalten hinzugefügt: eine leere Box mit einem breiten orangefarbenen linken Rahmen wurde dem ::before Pseudoelement hinzugefügt. Der Text ist ebenfalls generierter Inhalt: "only one <div>" wurde mit der content Eigenschaft angewendet auf das ::after Pseudoelement generiert.

Klicken Sie auf "Play" im obigen Beispiel, um den Code im MDN Playground zu sehen oder zu bearbeiten.

<content-list>
<content-replacement> (siehe <image>)
<image>
<counter>
<quote>
<target>

Leitfäden

"Anleitung" für generierte Inhalte: Lernen Sie, wie Sie Text- oder Bildinhalte mit der content Eigenschaft zu einem Dokument hinzufügen können.
Erstellen Sie dekorative Boxen mit generierten Inhalten: Beispiel für das Styling von generierten Inhalten für visuelle Effekte.

Spezifikationen

Specification
CSS Generated Content Module Level 3

CSS generierte Inhalte

Generierte Inhalte in Aktion

Referenz

Eigenschaften

Funktionen

Datentypen

Leitfäden

Verwandte Konzepte

Spezifikationen

Siehe auch