CSS Pseudo-Element wird verwendet, um den Teil eines bestimmten Elements zu stylen. Zum Beispiel kann es verwendet werden, um Inhalte vor oder nach dem Element oder nach dem Element oder dem ersten Zeilen oder Buchstaben des Elements zu stylen. Zu diesem Zweck werden die vor und nach pseudoelementierten, die in Kraft treten, verwendet.

Dieser Blog unterrichtet Sie über CSS “Vor" Und "nach”Selektoren. Aber vorher werden wir die Syntax von Pseudoelementen diskutieren.

So verwenden Sie "Pseudo-Element" in CSS?

Die Syntax des Pseudoelements wird unten erwähnt:

Selector :: Pseudo-Element
CSS -Eigenschaften…

Hier:

• “Wähler": Die HTML -Elemente, die wir in CSS stylen möchten, werden mit den CSS -Selektoren ausgewählt. Diese Selektoren können ID -Selektoren, Element -Selektoren, Klassenauswahl oder mehr sein.
• “Pseudoelement”: Pseudoelement wird verwendet, um den Teil eines bestimmten Elements zu stylen. Es kann vor, nach der ersten Zeile, zum ersten Brief oder mehr sein.
• “CSS -Eigenschaften”: Diese Eigenschaften können verwendet werden, um den zusätzlichen Inhalt zu stylen.

Beispiel

Der erste Schritt besteht darin, eine neue DIV mit der Klasse zu erstellen. “hauptsächlich”. Innerhalb dieses DIV -Elements enthalten

Und

Elemente, um der Webseite einige Inhalte hinzuzufügen:

Hallo Welt!

LinuxHint ist die beste Tutorial -Website.

Tritt unserer Gemeinschaft bei

Wir schreiben Artikel und machen Videos, um die Welt online zu erziehen.

Stil vor dem „H2“ -Element

H2 :: vor
Inhalt: "->";
Farbe grün;

Der "H2 :: vor”Bezieht sich auf das Hinzufügen von Stil zum vor dem H2 -Element mit den folgenden Eigenschaften:

• “InhaltEigenschaft gibt den Inhalt an, der im Element eingefügt wird.
• “FarbeDie Eigenschaft wird verwendet, um die Textfarbe des Elements festzulegen.

Stil „P“ Element

.Haupt P
Schriftgröße: 20px;

Der ".Haupt p”Bezieht sich auf das P -Element der Hauptdiv. Die Schriftgröße wird auf 20px eingestellt, wobei die “verwendet werdenSchriftgröße" Eigentum.

Hier ist das Ergebnis des obigen Code:

Wie wir sehen können, wird jedes H1 -Element in der HTML -Datei mit dem Symbol zuvor angegeben.

Hier ist die Liste der Inhalte, die in der Inhaltseigenschaft angegeben werden können:

• “Eine Zeilenpause”: Um einen Zeilenumbruch einzufügen, verwenden Sie“\A”Charakter
• “Nichts”: Es wird als leere umgekehrte Kommas angegeben und ist nützlich, wenn Sie Hintergrundbilder einfügen.
• “Ein Bild”: Um ein Bild in die Inhaltseigenschaft einzufügen, geben wir die„ URL “des Bildes an.
• “Ein Faden”: Sonderzeichen müssen als Unicode -Entität codiert werden.

So fügen Sie GIF -Element "vor" hinzu?

Wir können auch GIFs oder Bilder vor oder nach den Elementen hinzufügen. Schauen Sie sich das Beispiel unten an.

Stil vor dem „H1“ -Element

H1 :: vor
Hintergrundbild: URL (/GIFS/Lächeln.gif);
Hintergrundgröße: 50px;
Hintergrundrepeat: No-Repeat;
Anzeige: Inline-Block;
Breite: 50px;
Höhe: 50px;
Inhalt: "";

Der "H1 :: vor”Bezieht sich auf den Einsatzstil vor dem H1 -Element. Die folgenden Eigenschaften werden auf das vor dem H1 -Element eingefügte Objekt angewendet:

• “HintergrundbildEigenschaft gibt die URL des GIF an.
• “HintergrundgrößeDie Eigenschaft wird verwendet, um die Hintergrundgröße anzugeben. S
• “Hintergrund WiederholungEigenschaft definiert, wie die Bilder wiederholt werden.
• “Anzeige”Eigenschaft mit dem Wert“Inline-BlockErmöglicht die Höhe und Breite des Elements, die Elemente angeben.
• “BreiteEigenschaft legt die Breite des HTML -Elements fest.
• “HöheEigenschaft legt die Höhe des HTML -Elements fest.
• “InhaltDie Eigenschaft wird verwendet, um den generierten Inhalt in Verbindung mit den Pseudo-Selektoren einzufügen.

Stil „Haupt“ Div

.hauptsächlich
Hintergrundfarbe: RGB (245, 245, 44);
Polsterung: 5px;

Der ".hauptsächlichDie Klasse des Div -Elements wird mit den aufgelisteten Eigenschaften gestaltet:

• “HintergrundfarbeDie Eigenschaft wird verwendet, um die Hintergrundfarbe des Elements anzugeben.
• “PolsterungEigenschaft wird verwendet, um den Raum über den Inhalt des T oder innerhalb des Randes festzulegen.

Es kann beobachtet werden, dass das GIF vor jedem H1 -Element platziert wird:

So fügen Sie Symbole „Nach“ spezifische Elemente ein?

Der Pseudo-Selektor “::nach”Wird verwendet, um Inhalte nach dem Element einzulegen. Das folgende Beispiel demonstriert das Nach-Pseudo-Selektor.

Beispiel

Erstellen Sie ein neues DIV -Element mit dem “hauptsächlich" Klasse. In diesem Element hinzufügen

Und

Elemente, um der Webseite einige Inhalte hinzuzufügen:

Html

Hypertext -Markup -Sprache

CSS

Cascading Style Sheet

Stil nach „H2“ -Element

H2 :: nach
Inhalt: "*";
Farbe Rot;
Schriftgröße: 30px;

Der "H2 :: Nach”Bezieht sich auf das Nachher des H2 -Elements. Im Folgenden finden Sie die Eigenschaften, die darauf angewendet werden:

• “InhaltEigenschaft gibt den Inhalt an, der im Element eingefügt wird.
• “FarbeDie Eigenschaft wird verwendet, um die Schriftfarbe zu definieren.
• “SchriftgrößeDie Eigenschaft wird für die Einstellung der Schriftgröße des Elements verwendet.

Stil „P“ Element

.Hauptkontent P
Schriftgröße: 20px;

Die Schriftgröße des P-Elements des Hauptkontent-DIV wird unter Verwendung der “angegebenSchriftgröße" Eigentum.

Die Ausgabe des obigen Codesausschnitts ist unten dargestellt:

Wir haben vor und nach Selektoren in CSS erfolgreich etwas über CSS erfahren.

Abschluss

In CSS werden Pseudoelemente verwendet, um einige Styling-Eigenschaften für den Teil eines Elements anzugeben. Zum Beispiel die “::Vor" Und "::nach”Spezifizierte Elemente werden verwendet, um den Stil vor und nach dem gewünschten Element hinzuzufügen. Dieser Blog hat die Verwendung von CSS vor und nach den Selektoren gezeigt.