CSS generierter Inhalt

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

Generierter Inhalt kann für den Inhaltsersatz verwendet werden, wobei der Inhalt eines DOM-Knotens durch ein CSS <image> ersetzt wird. Der CSS generierte Inhalt ermöglicht auch die Erzeugung sprachspezifischer Anführungszeichen, die Erstellung benutzerdefinierter Listennummern und -punkte sowie das visuelle Hinzufügen von Inhalt durch das Generieren von Inhalt 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 einzelnes, leeres <div> innerhalb eines ansonsten leeren <body>. Der Schneemann wurde mit CSS-Bildern und CSS-Hintergründen und -Rändern erstellt. Die Karottennase wurde mit generiertem Inhalt hinzugefügt: Ein leeres Feld mit einem breiten orangen linken Rand, der dem ::before Pseudo-Element hinzugefügt wurde. Der Text ist ebenfalls generierter Inhalt: "nur ein <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 Bildinhalt mit der content Eigenschaft zu einem Dokument hinzufügen können.
Erstellen Sie schicke Boxen mit generiertem Inhalt: Beispiel für das Styling generierten Inhalts für visuelle Effekte.