CSS generierter Inhalt

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

Generierter Inhalt kann für Inhaltsersetzung verwendet werden, wobei der Inhalt eines DOM-Knotens durch ein CSS-<image> ersetzt wird. Der CSS generierter Inhalt ermöglicht außerdem das Erzeugen sprachspezifischer Anführungszeichen, das Erstellen benutzerdefinierter Listenelementnummern und Aufzählungszeichen und das visuelle Hinzufügen von Inhalten, indem auf ausgewählten Pseudoelementen generierter Inhalt als anonyme ersetzte Elemente dargestellt wird.

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 besteht aus einem einzigen, leeren <div> in einem ansonsten leeren <body>. Der Schneemann wurde mit CSS-Bildern und CSS-Hintergründen und -Rahmen erstellt. Die Karottennase wurde unter Verwendung von generiertem Inhalt hinzugefügt: Eine leere Box mit einer breiten orangen linken Umrandung wurde dem ::before Pseudoelement hinzugefügt. Der Text ist ebenfalls generierter Inhalt: "only one <div>" wurde mit der content-Eigenschaft auf das ::after Pseudoelement angewendet 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>

Leitfaden

"Anleitung" Leitfaden für generierten Inhalt: Lernen Sie, wie Sie Text- oder Bildinhalte mit der content-Eigenschaft zu einem Dokument hinzufügen können.
Erstellen Sie schicke Boxen mit generiertem Inhalt: Beispiel für die Gestaltung generierter Inhalte für visuelle Effekte.