CSS generierter Inhalt

Das Modul für CSS generierter Inhalt definiert, wie der Inhalt eines Elements ersetzt und Inhalt mit CSS zu einem Dokument hinzugefügt werden kann.

Generierter Inhalt kann zur Inhaltsersetzung verwendet werden, wobei der Inhalt eines DOM-Knotens durch ein CSS <image> ersetzt wird. Der generierte CSS-Inhalt ermöglicht auch die Generierung von sprachspezifischen Anführungszeichen, das Erstellen von benutzerdefinierten Listennummern und Aufzählungszeichen sowie das visuelle Hinzufügen von Inhalten durch die Erzeugung von Inhalten auf ausgewählten Pseudo-Elementen als anonyme ersetzte Elemente.

Generierter Inhalt 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 einziges, leeres <div> in einem ansonsten leeren <body>. Der Schneemann wurde mit CSS-Bildern und CSS-Hintergründen und -Rahmen erstellt. Die Karotten-Nase wurde durch generierten Inhalt hinzugefügt: eine leere Box mit einem breiten orangen linken Rahmen, der dem ::before Pseudo-Element hinzugefügt wurde. Der Text ist ebenfalls generierter Inhalt: "only one <div>" wurde mit der content Eigenschaft angewendet auf das ::after Pseudo-Element 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 generierten Inhalt: Lernen Sie, wie Sie Text- oder Bildinhalte mit der content Eigenschaft zu einem Dokument hinzufügen.
Erstellen Sie fantasievolle Kästen mit generiertem Inhalt: Beispiel für das Styling von generiertem Inhalt für visuelle Effekte.