Pseudoelemente sind einer der fortschrittlicheren Selektoren, die für die Verwendung in CSS verfügbar sind. Der Hauptzweck dieser Selektoren besteht darin, ein einzigartiges Design zu erstellen, ohne das HTML-Dokument zu ändern, mit dem die Grundstruktur einer bestimmten Webseite erstellt wird.

Hier erfahren Sie, wie Sie Pseudoelemente in CSS verwenden.

Gemeinsame Pseudoelemente

Es gibt eine umfangreiche Liste von Pseudoelementen, die verfügbar sind, um das Leben eines Webentwicklers zu erleichtern. Einige dieser Pseudoelemente umfassen:

• Vor
• Nach dem
• Hintergrund
• Erste Linie
• Erster Brief

In bestimmten Situationen erweisen sich einige Pseudoelemente als geeigneter als andere, aber das einzige, was konstant bleibt, ist die allgemeine Struktur für die Verwendung eines Pseudoelements.

Strukturbeispiel für Pseudoelemente

Selektor:: Pseudoelement {
/ * CSS-Code * /
} 

Obwohl du kannst Verwenden Sie ein HTML-Element als SelektorEs wird empfohlen, eine Klasse oder eine ID zu verwenden, um zu vermeiden, dass unbeabsichtigte Elemente in Ihrem Layout angesprochen werden. Das Element, der Stil oder die Daten, die Sie an der gewünschten Position einfügen möchten, sollten zwischen den geschweiften Klammern platziert werden.

Die Vorher- und Nachher-Pseudoelemente sind die beliebtesten in der Liste, und da es viele praktische Möglichkeiten gibt, sie zu verwenden, ist es nicht schwer zu verstehen, warum.

Verwenden des Vorher-Pseudo-Elements in CSS

Obwohl dies nicht unmöglich ist, ist es schwierig, Bilder mit lesbarem Text in CSS zu überlagern. Dies liegt hauptsächlich daran, dass das Bild und der Text auf einer Webseite dieselbe Position einnehmen würden.

Es ist relativ einfach zu Senden Sie ein Bild an den Hintergrund einer Textgruppe, aber wenn das Bild zu hell ist, neigt es dazu, den darüber liegenden Text zu überwältigen. In diesen Fällen besteht der nächste Schritt darin, das Bild mithilfe der Opazitätseigenschaft weniger undurchsichtig zu machen.

Das einzige Problem ist, dass, da das Bild und der Text dieselbe Position einnehmen, der Text auch etwas transparent wird.

Eine der wenigen effektiven Möglichkeiten, dieses Problem zu lösen, ist die Verwendung des vorherigen Pseudoelements.

Verwenden des Vorher-Pseudoelement-Beispiels

.landingPage {
/ * Ordnet den Text auf der Bildüberlagerung an * /
Anzeige: flex;
Flex-Richtung: Säule;
Rechtfertigungsinhalt: Mitte;
Ausrichtungselemente: Mitte;
Textausrichtung: Mitte;
/ * Legt fest, dass die Seite an verschiedene Bildschirmgrößen angepasst wird * /
Höhe: 100vh;
}
.landingPage:: before {
Inhalt:'';
/ * importiert ein Bild * /
Hintergrund: URL ( https://source.unsplash.com/_1EYIHRG014/1600x900)
No-Repeat-Mitte / Abdeckung;
/ * legt eine Überlagerung über das Bild * /
Opazität: 0,4;
/ * macht das Bild sichtbar * /
Position: absolut;
oben: 0;
links: 0;
Breite: 100%;
Höhe: 100%;
}

Der obige Code wurde erstellt, um im Einklang mit der folgenden HTML-LandingPage-Klasse verwendet zu werden. Wie im obigen Code gezeigt, können wir mithilfe des vorherigen Pseudoelements auf das Bild zielen und die Opazitätseigenschaft darauf verwenden, bevor das Bild mit dem Text kombiniert wird.

Verwenden des Vorher-Pseudoelements


Dies ist das Ergebnis der Verwendung des Vorher-Pseudoelements
zu überlagern und mit lesbarem Text abzubilden.

Dies führt dazu, dass eine Überlagerung auf dem Bild platziert wird und Klartext oben angezeigt wird, wie im folgenden Bild gezeigt:

Verwenden des After-Pseudo-Elements in CSS

Eine praktische Verwendung für das After-Pseudo-Element besteht darin, die Erstellung eines HTML-Formulars zu unterstützen. Die meisten Formulare werden mit einer Reihe von Feldern erstellt, für die Daten erforderlich sind, damit das Formular erfolgreich gesendet werden kann.

Eine Möglichkeit, anzuzeigen, dass für ein Feld in einem Formular Daten erforderlich sind, besteht darin, nach der Beschriftung für dieses Feld ein Sternchen zu setzen. Das After-Pseudo-Element bietet Ihnen eine praktische Möglichkeit, dies zu tun.

Verwenden des After-Pseudo-Element-Beispiels

.erforderlich:: nach {
Inhalt: '*';
Farbe Rot;
} 

Durch Einfügen des obigen Codes in den CSS-Abschnitt Ihres Formulars wird sichergestellt, dass auf jedes Etikett, das die erforderliche Klasse enthält, direkt ein rotes Sternchen folgt. Das After-Pseudo-Element ist auch in diesem Beispiel praktisch, da es hilft, das Styling von der Struktur zu trennen (was in der Softwareentwicklung immer ideal ist).

Die Content-Eigenschaft

Wie im obigen Beispiel nach Pseudoelementen gezeigt, ist die Eigenschaft content das Werkzeug, mit dem neuer Inhalt auf einer Webseite eingefügt wird. Diese Eigenschaft wird nur mit den Vorher- und Nachher-Pseudoelementen verwendet.

Es ist wichtig zu beachten, dass selbst wenn kein Inhalt verfügbar ist, der in die content-Eigenschaft eingespeist werden kann (wie im vorherigen Beispiel für Pseudoelemente) oben) müssen Sie weiterhin die content-Eigenschaft innerhalb der Parameter des Vorher- oder Nachher-Pseudoelements verwenden, damit sie funktionieren beabsichtigt.

Jetzt können Sie Pseudoelemente in CSS verwenden

In diesem Artikel haben Sie gelernt, wie Sie Pseudoelemente in Ihren CSS-Programmen identifizieren und verwenden. Sie wurden in die Vorher- und Nachher-Pseudoelemente eingeführt und erhielten praktische Möglichkeiten, beide zu verwenden. Sie konnten auch sehen, warum die Eigenschaft content für die erfolgreiche Verwendung der Vorher- und Nachher-Pseudoelemente erforderlich ist.

10 einfache CSS-Codebeispiele, die Sie in 10 Minuten lernen können

Möchten Sie mehr über die Verwendung von CSS erfahren? Probieren Sie zunächst diese grundlegenden CSS-Codebeispiele aus und wenden Sie sie dann auf Ihre eigenen Webseiten an.

Weiter lesen

Über den Autor