::before

Das ::before-Pseudo-Element ist ein Inline-Block, das als unmittelbares Kind des Elements, mit dem es verknüpft ist, oder des "ursprünglichen Elements" generiert wird. Es wird häufig verwendet, um kosmetische Inhalte mithilfe der content-Eigenschaft hinzuzufügen, wie z.B. Symbole, Anführungszeichen oder andere Dekorationen.

::before-Pseudo-Elemente können nicht auf ersetzte Elemente wie <img> angewendet werden, deren Inhalte durch externe Ressourcen bestimmt werden und nicht durch das aktuelle Dokument beeinflusst werden.

Ein ::before-Pseudo-Element mit einem display-Wert von list-item verhält sich wie ein Listenelement und kann daher ein ::marker-Pseudo-Element wie ein <li>-Element generieren.

Wenn die content-Eigenschaft nicht angegeben, ungültig oder auf normal oder none gesetzt ist, wird das ::before-Pseudo-Element nicht angezeigt. Es verhält sich, als wäre display: none gesetzt.

Standardmäßig teilen ::before und ::after-Pseudo-Elemente denselben Stapelkontext wie ihr übergeordnetes Element. Wenn kein z-index explizit gesetzt ist, erscheint der generierte Inhalt des ::after-Pseudo-Elements über dem des ::before-Pseudo-Elements, da ::after im DOM-Fluss später gerendert wird.

Die Verwendung eines ::before-Pseudo-Elements zum Hinzufügen von Inhalten wird nicht empfohlen, da es nicht zuverlässig von Bildschirmlesegeräten erfasst wird.

Ein Beispiel für die Verwendung von ::before-Pseudo-Elementen ist das Bereitstellen von Anführungszeichen. Hier verwenden wir sowohl ::before als auch ::after, um Anführungszeichen hinzuzufügen.

HTML

<q>Some quotes</q>, he said, <q>are better than none.</q> 

CSS

q::before { content: "«"; color: blue; } q::after { content: "»"; color: red; } 

Ergebnis

Wir können Text oder Bilder in der content-Eigenschaft auf fast jede Weise gestalten, die wir wünschen.

HTML

<span class="ribbon">Notice where the orange box is.</span> 

CSS

.ribbon { background-color: #5bc8f7; } .ribbon::before { content: "Look at this orange box."; background-color: #ffba10; border-color: black; border-style: dotted; } 

Ergebnis

In diesem Beispiel erstellen wir eine Aufgabenliste mit Pseudo-Elementen. Diese Methode kann oft verwendet werden, um der Benutzeroberfläche kleine Akzente hinzuzufügen und das Benutzererlebnis zu verbessern.

HTML

<ul> <li>Buy milk</li> <li>Take the dog for a walk</li> <li>Exercise</li> <li>Write code</li> <li>Play music</li> <li>Relax</li> </ul> 

CSS

li { list-style-type: none; position: relative; margin: 2px; padding: 0.5em 0.5em 0.5em 2em; background: lightgrey; font-family: sans-serif; } li.done { background: #ccff99; } li.done::before { content: ""; position: absolute; border-color: #009933; border-style: solid; border-width: 0 0.3em 0.25em 0; height: 1em; top: 1.3em; left: 0.6em; margin-top: -1em; transform: rotate(45deg); width: 0.5em; } 

JavaScript

const list = document.querySelector("ul"); list.addEventListener( "click", (ev) => { if (ev.target.tagName === "LI") { ev.target.classList.toggle("done"); } }, false, ); 

Hier ist das obige Codebeispiel in Aktion. Beachten Sie, dass keine Symbole verwendet werden und das Häkchen tatsächlich das ::before-Element ist, das in CSS gestaltet wurde. Fangen Sie an, Dinge zu erledigen.

Ergebnis

Da generierte Inhalte CSS und kein HTML sind, können Sie keine Markup-Entitäten in Inhaltswerten verwenden. Wenn Sie ein Sonderzeichen verwenden müssen und es nicht direkt in Ihre CSS-Content-Zeichenfolge eingeben können, verwenden Sie eine Unicode-Escape-Sequenz. Diese besteht aus einem Rückwärtsschrägstrich, gefolgt vom hexadezimalen Unicode-Wert des Zeichens.

HTML

<ol> <li>Crack Eggs into bowl</li> <li>Add Milk</li> <li>Add Flour</li> <li aria-current="step">Mix thoroughly into a smooth batter</li> <li>Pour a ladleful of batter onto a hot, greased, flat frying pan</li> <li>Fry until the top of the pancake loses its gloss</li> <li>Flip it over and fry for a couple more minutes</li> <li>serve with your favorite topping</li> </ol> 

CSS

li { padding: 0.5em; } li[aria-current="step"] { font-weight: bold; } li[aria-current="step"]::before { content: "\21E8 "; /* Unicode escape sequence for "Rightwards White Arrow" */ display: inline; } 

Ergebnis

Das ::before::marker geschachtelte Pseudo-Element wählt den Listen-::marker eines ::after-Pseudo-Elements, das selbst ein Listenelement ist, d.h. es hat seine display-Eigenschaft auf list-item gesetzt.

In dieser Demo generieren wir zusätzliche Listenelemente vor und nach einem Navigationsmenü mit ::before und ::after (indem wir sie auf display: list-item setzen, damit sie sich wie Listenelemente verhalten). Dann verwenden wir ul::before::marker und ul::after::marker, um ihren Listenmarkern eine andere Farbe zu geben.

HTML

<ul> <li><a href="#">Introduction</a></li> <li><a href="#">Getting started</a></li> <li><a href="#">Understanding the basics</a></li> </ul> 

CSS

ul { font-size: 1.5rem; font-family: Arial, Helvetica, sans-serif; } ul::before, ul::after { display: list-item; color: orange; } ul::before { content: "Start"; } ul::after { content: "End"; } ul::before::marker, ul::after::marker { color: red; } 

Ergebnis

Während die Listenpunkte der drei Navigationselemente generiert werden, weil sie <li>-Elemente sind, wurden "Start" und "Ende" über Pseudo-Elemente eingefügt, und ::marker wird verwendet, um ihre Punkte zu gestalten.

• ::after
• content