So verwenden Sie vor und nach Pseudo-Elementen in CSS

So verwenden Sie vor und nach Pseudo-Elementen in CSS

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





So verwenden Sie Pseudoelemente in CSS.



warum ist mein echopunkt rot

Häufige Pseudo-Elemente

Es gibt eine umfangreiche Liste von Pseudo-Elementen, die einem Webentwickler das Leben erleichtern. Einige dieser Pseudoelemente umfassen:





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

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

Beispiel für eine Pseudo-Element-Struktur


selector::pseudo-element{
/* css code */
}

Obwohl Sie ein HTML-Element als Selektor verwenden können, wird empfohlen, eine Klasse oder eine ID zu verwenden, um zu vermeiden, dass unbeabsichtigte Elemente in Ihrem Layout als Ziel verwendet 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 Vor-Pseudo-Elements in CSS

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



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

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



Eine der wenigen effektiven Möglichkeiten, dieses Problem zu lösen, besteht darin, das Pseudoelement vor zu verwenden.

Verwenden des Vor-Pseudo-Element-Beispiels


.landingPage{
/* Arranges the text on the image overlay */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
/*sets the page to adjust to different screen sizes*/
height: 100vh;
}
.landingPage::before{
content:'';
/*imports an image*/
background: url(https://source.unsplash.com/_1EYIHRG014/1600x900)
no-repeat center/cover;
/*places an overlay on top of the image*/
opacity: 0.4;
/*makes the image visible*/
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Der obige Code wurde erstellt, um zusammen mit der HTML-LandingPage-Klasse unten verwendet zu werden. Wie im obigen Code gezeigt, können wir mithilfe des Pseudo-Elements before auf das Bild abzielen und die opacity-Eigenschaft darauf verwenden, bevor das Bild mit dem Text kombiniert wird.





This is the result of using the before pseudo-element
to overlay and image with readable text.


Dies führt dazu, dass ein Overlay auf dem Bild platziert wird und Klartext darüber angezeigt wird, wie in der folgenden Abbildung gezeigt:

Verwenden des After-Pseudo-Elements in CSS

Eine praktische Verwendung für das After-Pseudoelement besteht darin, bei der Erstellung eines HTML-Formulars zu helfen. 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, anzugeben, dass für ein Feld in einem Formular Daten erforderlich sind, besteht darin, ein Sternchen nach der Beschriftung für dieses Feld zu platzieren. Das Pseudo-Element after bietet eine praktische Möglichkeit, dies zu tun.

Verwenden des After-Pseudo-Element-Beispiels


.required::after{
content: '*';
color: red;
}

Wenn Sie den obigen Code in den CSS-Abschnitt Ihres Formulars einfügen, wird sichergestellt, dass auf jedes Label, das die erforderliche Klasse enthält, direkt ein rotes Sternchen folgt. Das Pseudo-Element after ist in diesem Beispiel auch praktisch, weil es hilft, das Styling von der Struktur zu trennen (was in der Softwareentwicklung immer ideal ist.)

Windows 10 WLAN verbindet sich nicht

Die Content-Eigenschaft

Wie im obigen Beispiel für das Pseudo-Element after gezeigt, ist die content-Eigenschaft das Werkzeug, das verwendet wird, um neuen Inhalt auf einer Webseite einzufügen. Diese Eigenschaft wird nur mit den Vorher- und Nachher-Pseudoelementen verwendet.

Es ist wichtig zu beachten, dass Sie die content-Eigenschaft auch dann innerhalb der Parameter von Vorher oder Nachher verwenden müssen, wenn kein Inhalt verfügbar ist, der der content-Eigenschaft zugeführt werden kann (wie im obigen Beispiel für das Pseudoelement 'vor') pseudo-Element, damit sie wie beabsichtigt funktionieren.

Jetzt können Sie Pseudo-Elemente in CSS verwenden

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

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

Brauchen Sie Hilfe bei CSS? Probieren Sie zunächst diese grundlegenden CSS-Codebeispiele aus und wenden Sie sie dann auf Ihre eigenen Webseiten an.

Weiter lesen Verwandte Themen
  • Programmierung
  • Web-Design
  • CSS
Über den Autor Kadeisha Kean(21 Artikel veröffentlicht)

Kadeisha Kean ist Full-Stack-Softwareentwicklerin und technische/Technologie-Autorin. Sie hat die ausgeprägte Fähigkeit, einige der komplexesten technologischen Konzepte zu vereinfachen; Herstellung von Material, das von jedem Technikneuling leicht verstanden werden kann. Sie schreibt leidenschaftlich gerne, entwickelt interessante Software und bereist die Welt (durch Dokumentationen).

Mehr von Kadeisha Kean

Abonniere unseren Newsletter

Abonnieren Sie unseren Newsletter für technische Tipps, Rezensionen, kostenlose E-Books und exklusive Angebote!

Klicken Sie hier, um sich zu abonnieren