CSS-generierter Inhalt

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

Generierter Inhalt kann für Inhaltsersetzungen verwendet werden, in welchem Fall der Inhalt eines DOM-Knotens durch ein CSS-<image> ersetzt wird. Der CSS-generierte Inhalt ermöglicht auch das Erzeugen von sprachspezifischen Anführungszeichen, das Erstellen benutzerdefinierter Listennummern und -punkte sowie das visuelle Hinzufügen von Inhalten durch das Generieren 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;
}

Der HTML-Code für dieses Beispiel ist ein einziges, leeres <div> in einem sonst leeren <body>. Der Schneemann wurde mit CSS-Bildern und CSS-Hintergründen und -Rändern erstellt. Die Möhrennase wurde mit generiertem Inhalt hinzugefügt: eine leere Box mit einem breiten orangefarbenen linken Rand, der zum ::before-Pseudo-Element hinzugefügt wurde. Der Text ist ebenfalls generierter Inhalt: "only one <div>" wurde mit der content-Eigenschaft erstellt, die auf das ::after-Pseudo-Element angewendet wurde.

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>

Leitfaden

"Anleitung" für generierten Inhalt: Lernen Sie, wie Sie Text oder Bildinhalt zu einem Dokument hinzufügen, indem Sie die content-Eigenschaft verwenden.
Erstellen Sie schicke Boxen mit generiertem Inhalt: Beispiel für das Styling von generiertem Inhalt für visuelle Effekte.