Pseudo-Element vorher und nachher verstehen

Cascading Style Sheet (CSS) ist in erster Linie dazu gedacht, Stile auf das HTML-Markup anzuwenden. In einigen Fällen ist jedoch das Hinzufügen zusätzlicher Markierungen zum Dokument überflüssig oder nicht möglich. In CSS gibt es tatsächlich eine Funktion, mit der zusätzliche Markierungen hinzugefügt werden können, ohne zu stören das eigentliche Dokument, nämlich das Pseudoelemente.

Sie haben von diesem Begriff gehört, insbesondere wenn Sie einige unserer Tutorials verfolgt haben.

Es gibt tatsächlich einige CSS-Familienmitglieder, die als klassifiziert werden Pseudoelemente so wie die :erste Linie, :erster Brief, ::Auswahl, :Vor und :nach dem. Für diesen Artikel beschränken wir uns jedoch nur auf die :Vor und :nach dem, “Pseudoelemente” hier wird speziell auf beide Bezug genommen. Wir werden dieses Thema von Grund auf betrachten.

Die Syntax- und Browserunterstützung

Das Pseudoelemente bin eigentlich schon da gewesen CSS1, aber die :Vor und :nach dem die wir hier besprechen, wurden in veröffentlicht CSS2.1. Am Anfang der Pseudoelemente Verwenden Sie für die Syntax ein einzelnes Doppelpunkt. Anschließend wird das Web in CSS3 weiterentwickelt Pseudoelemente wurden überarbeitet, um das Doppelpunkt - Werden zu verwenden ::Vor & ::nach dem - um es mit zu unterscheiden Pseudoklassen (d.h.. :schweben, :aktiv, und so weiter).

Unabhängig davon, ob Sie das Ein-Doppel- oder das Doppel-Doppel-Format verwenden, erkennen die Browser immer noch eines. Da Internet Explorer 8 nur das Ein-Doppelpunkt-Format unterstützt, ist die Verwendung des Ein-Doppelpunkts sicherer, wenn Sie eine breitere Browser-Kompatibilität wünschen.

Was tut es?

Kurz gesagt, die Pseudoelemente fügt ein zusätzliches Element ein Vor oder nach dem das Element des Inhalts. Wenn wir also beide hinzufügen, sind sie technisch gleichwertig mit der folgenden Markierung.

:Vor Dies ist der Hauptinhalt. :nach dem

Diese Elemente werden jedoch nicht wirklich im Dokument generiert. Sie sind immer noch auf der Oberfläche sichtbar, aber Sie werden sie nicht in der Dokumentenquelle finden, also praktisch Fälschung Elemente.

Verwendung von Pseudoelementen

Verwenden Pseudoelemente ist relativ einfach; die folgende Syntax Wahlschalter: vorher wird ein Element hinzufügen Vor der Inhaltsselektor während dieser Syntax Wahlschalter: nach wird danach hinzufügen, und um einen Inhalt darin hinzuzufügen, können wir das verwenden Inhalt Eigentum.

Mit dem folgenden Ausschnitt wird beispielsweise vor und nach dem Anführungszeichen ein Anführungszeichen eingefügt Blockquote.

 blockquote: before content: offenes Zitat;  blockquote: after content: close-quote;

Pseudo-Elemente gestalten

Obwohl es ein gefälschtes Element ist, ist das Pseudoelemente verhalten sich eigentlich wie ein “echt” Element; Wir können beliebige Stildeklarationen hinzufügen, z. B. die Farbe ändern, den Hintergrund hinzufügen, die Schriftgröße anpassen, den Text darin ausrichten und so weiter.

 blockquote: before content: offenes Zitat; Schriftgröße: 24pt; Text ausrichten: Mitte; Zeilenhöhe: 42px; Farbe: #fff; Hintergrund: #ddd; Schwimmer: links; Position: relativ; oben: 30px;  blockquote: after content: close-quote; Schriftgröße: 24pt; Text ausrichten: Mitte; Zeilenhöhe: 42px; Farbe: #fff; Hintergrund: #ddd; schweben rechts; Position: relativ; unten: 40px;

Dimension angeben

Die generierten Elemente sind standardmäßig ein Inline-Level-Element. Wenn Sie also die Höhe und die Breite festlegen möchten, müssen Sie es zuerst als Blockelement definieren Bildschirmsperre Erklärung.

 blockquote: before content: offenes Zitat; Schriftgröße: 24pt; Text ausrichten: Mitte; Zeilenhöhe: 42px; Farbe: #fff; Hintergrund: #ddd; Schwimmer: links; Position: relativ; oben: 30px; Grenzradius: 25px; / ** Definiere es als Blockelement ** / display: block; Höhe: 25px; Breite: 25px;  blockquote: after content: close-quote; Schriftgröße: 24pt; Text ausrichten: Mitte; Zeilenhöhe: 42px; Farbe: #fff; Hintergrund: #ddd; schweben rechts; Position: relativ; unten: 40px; Grenzradius: 25px; / ** Definiere es als Blockelement ** / display: block; Höhe: 25px; Breite: 25px;

Hintergrundbild anhängen

Wir können den Inhalt auch durch ein Bild ersetzen und nicht nur Text. Obwohl die Inhalt Eigenschaft bietet a URL () Zeichenkette, um ein Bild einzufügen, aber in den meisten Fällen ziehe ich es vor, die Hintergrund Eigenschaft für mehr Kontrolle über das Bild.

 blockquote: vor content: ""; Schriftgröße: 24pt; Text ausrichten: Mitte; Zeilenhöhe: 42px; Farbe: #fff; Schwimmer: links; Position: relativ; oben: 30px; Grenzradius: 25px; Hintergrund: URL (images / quotationmark.png) -3px -3px #ddd; Bildschirmsperre; Höhe: 25px; Breite: 25px;  blockquote: after content: ""; Schriftgröße: 24pt; Text ausrichten: Mitte; Zeilenhöhe: 42px; Farbe: #fff; schweben rechts; Position: relativ; unten: 40px; Grenzradius: 25px; Hintergrund: URL (images / quotationmark.png) -1px -32px #ddd; Bildschirmsperre; Höhe: 25px; Breite: 25px;

Wie Sie dem obigen Snippet entnehmen können, deklarieren wir jedoch immer noch das Inhalt Eigenschaft und diesmal mit einer leeren Zeichenfolge. Das Inhalt Eigentum ist eine Voraussetzung und sollte immer angewendet werden; ansonsten der Pseudoelement wird nicht funktionieren was auch immer.

Kombinieren mit Pseudoklassen

Obwohl sie eine andere Art sind Pseudo-, wir können die verwenden Pseudoklassen zusammen mit Pseudoelemente zusammen in einer CSS-Regel, zum Beispiel, wenn wir die Anführungszeichen Hintergrund ein bisschen dunkler, wenn wir über dem schweben Blockquote.

 blockquote: hover: after, blockquote: hover: before Hintergrundfarbe: # 555;

Übergangseffekt hinzufügen

Und wir können sogar das anwenden Übergang Eigenschaft für sie, um einen anmutigen Farbübergang zu erzeugen.

 Übergang: alle 350ms; -o-Übergang: alle 350 ms; -Moz-Übergang: alle 350ms; -webkit-Übergang: alle 350ms;

Leider scheint der Übergangseffekt jedoch nur in der neuesten Version von Firefox zu funktionieren. Hoffentlich werden mehr Browser aufholen, damit die Übergangseigenschaft angewendet werden kann Pseudoelemente in der Zukunft.

Demo
Quelle herunterladen

Mehr Inspiration

Um Sie zu begeistern, haben wir drei coole Beispiele ausgewählt, die Ihnen Ideen für Ihr Webdesign geben können.

Faszinierende Schatten

In diesem Tutorial erläuterte Paul Underwood, wie Sie einen realistischeren und faszinierenderen Schatteneffekt mithilfe von erstellen :Vor und :nach dem Pseudoelemente. Beide sind absolut positioniert und ganz hinten mit platziert Negativ z-index Wert.

Bildeffekt gestapelt

Verwendung der Pseudoelemente zum Erzeugen eines unordentlich gestapelten Bildeffekts nur mit einem einzelnen Bild auf dem Markup ist ebenfalls möglich. Das Pseudoelemente wird verwendet, um eine Illusion der gestapelten Bilder auf der Rückseite des tatsächlichen Bildes mithilfe von Negativ zu erzeugen z-index.

Fazit

PSeudo-Elemente ist einfach “cool” und letztlich nutzbar, im Grunde haben wir zwei Bonuselemente für jedes Element, das wir hinzufügen, ohne die eigentliche HTML-Struktur zu beeinträchtigen, und dann auf fast alles, was wir uns vorstellen können, zu machen.

Es gibt tatsächlich einige Verbesserungen für Pseudoelemente an dem derzeit gearbeitet wird, wie z Verschachtelung von Pseudoelementen div :: before :: before content: "; und mehrere Pseudoelemente div :: before (3) content: "; Dies wird in Zukunft natürlich viel mehr Möglichkeiten in der Webdesign-Praxis eröffnen. Lassen Sie uns geduldig warten, während sie in aktuellen Browsern implementiert werden.