Während der Entwicklung einer Website stoßen Webentwickler häufig auf Situationen, in denen sie benötigt wird, um einen bestimmten Teil eines Elements zu stylen oder bestimmte Inhalte vor oder nach einem bestimmten Element hinzuzufügen. Alle diese Aufgaben können unter Verwendung von Pseudoelementen in CSS ausgeführt werden. Dieser Beitrag wird Ihnen alles über Pseudoelemente beibringen.

Sie werden die folgenden Themen in diesem Beitrag durchlaufen.

1. Was sind Pseudoelemente in CSS
2. ::erster Brief
3. ::erste Linie
4. ::Vor
5. ::nach
6. ::Auswahl

Was sind Pseudoelemente in CSS

Pseudo-Elemente sind Schlüsselwörter, mit denen ein bestimmtes Teil eines bestimmten Elements gestaltet wird. Diese werden beim Styling von Elementen in einen Selektor eingeführt. Zum Beispiel möchten Sie dem ersten Buchstaben eines Elements eine Farbe geben oder vor einem bestimmten Element einen Text hinzufügen.

Syntax

Selector :: Pseudo-Element
Eigentumswert;

Hier haben wir einige der wichtigen Pseudoelemente für Ihr besseres Verständnis hervorgehoben.

::erster Brief

Dies wird verwendet, um dem ersten Buchstaben eines Textes einen bestimmten Stil zu verleihen. Darüber hinaus wird er nur auf die Elemente auf Blockebene angewendet. Es unterstützt viele CSS -Eigenschaften wie Farbe, Schriftart, Rand, Rand, Polsterung, Hintergrund usw.

Beispiel

Befolgen Sie den folgenden Code, um zu verstehen, wie dieses Element funktioniert.

Html

Pseudoelemente

Hier haben wir eine definiert

Element.

CSS

H1 :: Erstgeschichte
Farbe: Sandybrown;
Schriftstil: kursiv;
Schriftgröße: 50px;

Wir verleihen dem ersten Buchstaben der Überschrift Sandybrown-Farbe, kursiver Schriftstil und 50px-Schriftgröße mit dem Pseudo-Element :: Erstgeschichte.

Ausgang

Der erste Buchstaben der Überschrift wurde mit dem :: Erstgeschichte Pseudo-Element bezeichnet.

::erste Linie

Wie der Name schon sagt, wird dies verwendet, um der ersten Zeile eines Textes einen Stil zu verleihen. Darüber hinaus gilt es nur für Elemente auf Blockebene auf Blockebene. Es unterstützt einige CSS -Eigenschaften, die Farbe, Schriftart, Hintergrund usw. sind.

Beispiel

Angenommen, Sie möchten der ersten Zeile von a etwas Farbe, Stil und Gewicht verleihen

Element. Folgen Sie dem folgenden Code.

Html

Wie der Name schon sagt, wird dieses Pseudoelement zum Styling der ersten Zeile eines Textes verwendet. Dieses Element kann auch nur auf Elemente auf Blockebene angewendet werden. Es unterstützt einige CSS -Eigenschaften, die Farbe, Schriftart, Hintergrund usw. sind.

Im obigen Code haben wir a definiert

Element und einige Text hinzugefügt.

CSS

P :: Erstlinie
Farbe lila;
Schriftstil: kursiv;
Schriftdicke: fett;

Verwenden Sie die :: First-Line-Pseudo-Element.

Ausgang

Die Erstlinie des Absatzes wurde erfolgreich gestaltet.

::Vor

Um Inhalte vor einem bestimmten Teil eines Elements hinzuzufügen, wird das :: vor Pseudoelement verwendet. Es unterstützt die CSS -Inhaltseigenschaft.

Beispiel

Angenommen, Sie möchten zu Beginn eines Absatzes Anführungszeichen hinzufügen. Verwenden Sie den folgenden Code.

Html

Dies ist ein Absatz.

Hier definieren wir unseren Absatz, vor dem wir alle ein Anführungszeichen hinzufügen.

CSS

P :: vor
Inhalt: '"';
Farbe blau;
Schriftgröße: 25px;

Im obigen Code fügen wir vor dem Absatz ein Anführungszeichen hinzu und geben ihm die Farbe Blau und setzen seine Größe auf 25px mit dem :: vor Pseudo-Element fest.

Ausgang

Die Anführungszeichen wurde erfolgreich mit dem :: vor Pseudoelement hinzugefügt.

::nach

Dies funktioniert ähnlich wie das :: vor Pseudoelement, mit dem einzigen Unterschied, dass es Inhalte nach einem bestimmten Teil eines Elements einfügt. Dieses Element wird auch mit der CSS -Inhaltseigenschaft verwendet.

Beispiel

Folgen Sie dem folgenden Beispiel, um die Arbeit des :: nach Pseudoelement zu verstehen.

Html

Cascading Style Sheets

Hier haben wir eine angegeben

Element und einige Inhalte hinzugefügt.

CSS

H1 :: nach
Inhalt: '(Pseudo-Elemente)';
Farbe blau;
Schriftgröße: 15px;

Wir fügen nach dem bestimmten Inhalt hinzu

Element, diese bestimmte Inhalt blau Farbe geben und seine Schriftgröße auf 15px festlegen.

Ausgang

Inhalt wurde nach der Überschrift hinzugefügt.

::Auswahl

Um ein Element zu stylen, das ein Benutzer auswählt, wird die :: Selection Pseudo-Element verwendet. Es unterstützt einige CSS -Eigenschaften, die Farbe, Hintergrund usw. sind.

Beispiel

Angenommen, Sie möchten, dass ein bestimmtes Element hervorgehoben wird, wenn ein Benutzer es auswählt. Folgen Sie dem folgenden Code.

Html

Einige Überschrift

Hier geben wir eine Überschrift an.

CSS

H1 :: Auswahl
Hintergrundfarbe: Hotpink;

Im obigen Code verwenden wir die :: Auswahl-Pseudo-Element, um der Überschrift jedes Mal, wenn der Benutzer sie auswählt, eine rosa Farbe zu verleihen.

Ausgang

Die :: Auswahlpseudoelement funktioniert ordnungsgemäß.

Abschluss

Pseudo-Elemente sind Schlüsselwörter, mit denen ein bestimmtes Teil eines bestimmten Elements gestaltet wird. In CSS gibt es verschiedene Pseudoelemente. Einige der wichtigsten und am häufigsten verwendeten Pseudoelemente sind jedoch; ::erster Brief, ::erste Linie, ::Vor, ::nach, Und ::Auswahl. Jede von diesen wird für verschiedene Stylingzwecke verwendet, die in diesem Beitrag ausführlich erklärt werden, zusammen mit Hilfe geeigneter Beispiele.