Rolf B: Banner über die Seite legen

Beitrag lesen

SELF-Forum

Banner über die Seite legen

Rolf B
– Informationen zu den Bewertungsregeln

Hallo Gerlinde,

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.

Ohne zusätzliche CSS Eigenschaften verhält sich das ::before-Element so wie ein <span>. Über weitere CSS Angaben mache ich daraus ein Blockelement mit absoluter oder fixer Positionierung, gebe ihm eine Größe relativ zur Fensterbreite und male per linear-gradient eine Ukraine-Fahne hinein.

Die aspect-ratio Eigenschaft ist relativ neu im CSS Eigenschaftenzoo, sie sorgt dafür, dass sich Breite und Höhe des Elements im angegebenen Verhältnis befinden. Früher musste man da mit padding-bottom tricksen. aspect-ratio macht das deutlich einfacher.

Außer ::before gibt es auch noch ::after, um am Ende eines Elements ein Pseudoelement einzufügen.

Wenn der Selektor vor dem ::before auf mehrere Elemente passt, bekommt jedes davon das Pseudoelement eingefügt.

h2::before {
   content: "* "; 
}

würde in jeder h2 Überschrift ein Sternchen an den Anfang setzen.

Artikel im Selfwiki zu ::before und ::after

Rolf

--
sumpsi - posui - obstruxi
Beitrag melden
–
Informationen zu den Bewertungsregeln