Hallo Rolf,
mit ::before definierst Du ein Pseudoelement. D.h. du brauchst im HTML nichts zu tun, die Angabe
body::before { content: "xyz"; }
sorgt dafür, das aus
<body> <h1>Überschrift</h1> <p>Bla Bla</p> </body>
etwas wird, das man sich so vorstellen könnte (es ist nur eine Visualisierung, kein gültiges HTML)
<body> <::before>xyz</::before> <h1>Überschrift</h1> <p>Bla Bla</p> </body>
Die content-Angabe ist Pflicht für ein ::before und gibt den Inhaltstext an.
ergänzend zu deiner anschaulichen Erklärung:
Die Pseudoelemente ::before und/oder ::after werden als Kindelemente des damit ausgestatteten Elements aufgefasst. Daraus folgt, dass ::before und ::after nur bei Elementen verwendet werden können, die auch Inhalt haben dürfen.
Deshalb bleibt ein ::before wirkungslos, wenn es beispielsweise auf ein img-Element angewendet wird, weil img per definitionem ein leeres Element ist, also keinen Inhalt haben kann. Das gilt ebenso für das input-Element oder etwa für br oder hr.
Möge die Übung gelingen
Martin
Darmstadt? Ist das nicht da, wo immer der Urologen-Kongress tagt?