CSS generierte Inhalte
Das CSS generierte Inhalte-Modul 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 zum Ersetzen von Inhalten verwendet werden, wobei der Inhalt eines DOM-Knotens durch ein CSS-<image> ersetzt wird. Das CSS generierte Inhalte ermöglicht außerdem die Erzeugung sprachspezifischer Anführungszeichen, das Erstellen benutzerdefinierter Listenelementzahlen und -aufzählungszeichen, sowie das visuelle Hinzufügen von Inhalten durch das Erzeugen von Inhalten auf ausgewählten Pseudo-Elementen als anonyme ersetzte Elemente.
Generierte Inhalte in Aktion
Das HTML für dieses Beispiel ist ein einzelnes, leeres <div> in einem ansonsten leeren <body>. Der Schneemann wurde mit CSS-Bildern und CSS-Hintergründen und Rahmen erstellt. Die Karottennase wurde mit generierten Inhalten hinzugefügt: ein leerer Kasten mit einer breiten orangefarbenen linken Rahmenlinie, die dem ::before Pseudo-Element hinzugefügt wurde. Der Text ist ebenfalls generierter Inhalt: "nur ein <div>" wurde mit der content-Eigenschaft erzeugt, die auf das ::after Pseudo-Element angewendet wurde.
Um den Code für diese Animation zu sehen, sehen Sie sich den Quellcode auf GitHub an.
Referenz
Eigenschaften
Funktionen
Das CSS generierte Inhalte-Modul führt sechs noch nicht implementierte CSS-Funktionen ein, darunter content(), string() und leader(), sowie die drei <target>-Funktionen target-counter(), target-counters() und target-text().
Datentypen
Leitfäden
- "Anleitung" für generierte Inhalte
-
Lernen Sie, wie Sie Text oder Bildinhalte mit der
content-Eigenschaft zu einem Dokument hinzufügen. - Erstellen Sie stilvolle Boxen mit generierten Inhalten
-
Beispiel für das Styling von generierten Inhalten für visuelle Effekte.
Verwandte Konzepte
-
CSS-Pseudo-Elemente Modul
-
CSS-Listen und Zähler Modul
counter()Funktioncounters()Funktioncounter-incrementEigenschaftcounter-resetEigenschaft
-
CSS-Werte und -Einheiten Modul
Spezifikationen
| Specification |
|---|
| CSS Generated Content Module Level 3 |