Der ::before-Selektor in HTML

1. CSS ::before Pseudo-Element
2. Verwenden Sie ::before, um Inhalt vor einem Element in HTML hinzuzufügen

Dieser Artikel stellt das CSS-Pseudoelement ::before vor und untersucht seine Anwendung in HTML.

CSS ::before Pseudo-Element

Der Selektor ::before ist ein CSS-Pseudoelement, mit dem wir Inhalte vor einem ausgewählten Element oder mehreren Elementen einfügen können. Es ist standardmäßig inline.

Die Eigenschaft content kommt oft mit dem Selektor ::before. Mit der Eigenschaft können Sie den Inhalt an der Stelle hinzufügen, die durch den Selektor ::before angegeben ist.

Mit diesen Eigenschaften können Sie Inhalt an beliebiger Stelle in ein HTML-Dokument einfügen, ohne Änderungen am HTML-Code vorzunehmen. Sie können die CSS-Stile auf den hinzugefügten Inhalt im Hauptteil des Selektors anwenden.

Die Syntax für den Selektor ::before ist unten dargestellt:

selector::before{
    /*Css Properties*/
}

Wenn Sie beispielsweise vor einem Absatz etwas Inhalt hinzufügen möchten, sollten Sie dies wie folgt schreiben.

p::before{
    /*Css Properties*/
}

Angenommen, Sie haben einen Absatz in HTML geschrieben, aber die Überschrift übersehen. In solchen Fällen können Sie das Pseudo-Element ::before verwenden, um die Überschrift vor dem Absatz einzufügen.

Sie können die Überschrift mit der Eigenschaft Inhalt schreiben und die Stile hinzufügen.

Im letzten Abschnitt können Sie praktisch das Pseudo-Element ::before verwenden.

Verwenden Sie ::before, um Inhalt vor einem Element in HTML hinzuzufügen

Sehen wir uns ein Beispiel für die Verwendung von ::before an, um Inhalt vor einem Element hinzuzufügen.

Erstellen Sie beispielsweise einen Container div1. Erstellen Sie dann eine geordnete Liste mit <ol> mit drei Elementen darin.

Schreiben Sie einige zufällige Elemente Ihrer Wahl mit dem Tag <li>.

Beispielcode:

<div class = "div1">
    <ol>
        <li>Point One</li>
        <li>Point Two</li>
        <li>Point Three </li>
    </ol>
</div>

Die Ausgabe ist ziemlich vorhersehbar. Es ist eine geordnete Liste mit drei Elementen.

Sie werden nun einige Elemente vor der Liste hinzufügen, ohne das HTML-Dokument zu ändern.

Erstellen Sie in CSS einen Selektor, indem Sie das Pseudo-Element ::before mit div1 als .div1::before verwenden. Verwenden Sie im Hauptteil des Selektors die Eigenschaft content und schreiben Sie einen beliebigen Inhalt für seinen Wert.

Betrachten wir als Inhalt eine Reihe von Sternchen.

Als Nächstes fügen wir etwas vor jedem Listenelement hinzu. Sie müssen das Element li auswählen und das Pseudo-Element ::before verwenden.

Wählen Sie das Element als .div1 li::before aus und verwenden Sie die Eigenschaft content, um '\2192' als Wert hinzuzufügen. Der Wert '\2192' ist die Entitätsnummer für einen Rechtspfeil.

.div1::before{
    content:'*************************';
    background: yellow;
}
.div1 li::before{
    content: '\2192';
}

Beobachten Sie, wie vor dem Inhalt von div1, vor der Liste, eine Reihe von Sternchen (*) gebildet wird. Außerdem haben wir vor jedem Punkt der geordneten Liste einen Rechtspfeil eingefügt.

So verhält sich das Pseudo-Element ::before zusammen mit der Eigenschaft content in CSS.