Der Martin: Banner über die Seite legen

Beitrag lesen

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?