Der CSS::before-Selektor fugt Inhalt vor einem ausgewählten Element ein. CSS:after fugt Inhalt nach einem angegebenen Element ein. Diese Selektoren werden häufig verwendet, um Text vor oder nach einem Absatz oder einem Link hinzuzufugen.
Wenn Sie eine Website entwerfen, möchten Sie möglicherweise Inhalte vor oder nach dem Inhalt einer Element erscheint. Sie können beispielsweise vor jedem Aufzählungspunkt in einer Liste ein Bild hinzufugen.
Hier kommen die CSS-Pseudoelemente::before und::after ins Spiel. Mit diesen Pseudoelementen können Sie Inhalte vor oder nach dem Inhalt eines Elements einfugen.
In diesem Tutorial wird anhand von Beispielen erläutert, wie die Pseudoelemente::before und::after verwendet werden, um Inhalte auf einer Webseite zu dekorieren. Am Ende dieses Tutorials sind Sie ein Experte im Umgang mit den Pseudo-Elementen::before und::after in CSS.
CSS-Pseudo-Elemente
Ein Pseudo-Element ist ein spezielles Schlusselwort, mit dem Sie einen bestimmten Teil der von einem CSS-Selektor ausgewählten Elemente formatieren können. Wir werden in diesem Artikel Pseudoelemente als Selektoren bezeichnen, da jedes Pseudoelement ein Selektor ist.
Pseudoelemente sind nutzlich, wenn Sie einem Element einen Stil zuweisen m√∂chten, ohne CSS-Klassen oder -IDs zum Element. Wenn Sie beispielsweise ein ">‚" Pfeil nach jedem Link auf einer Webseite, k√∂nnten Sie ein Pseudo-Element verwenden.
CSS bietet eine breite Palette von Pseudo-Elementen. Dazu gehören::first-line,::first-letter,::before und::after. In diesem Tutorial konzentrieren wir uns auf die letzten beiden:::before und::after.
Pseudo-Elemente werden typischerweise mit einem Doppelpunkt (::) dargestellt. CSS3 unterstutzt zwar die Verwendung der Syntax mit einem Doppelpunkt (:), um ein Pseudoelement zu deklarieren, die Verwendung der Notation mit zwei Doppelpunkten ist jedoch die beste Vorgehensweise.
Dies liegt daran, dass die Notation mit zwei Doppelpunkten verwendet wird, um Pseudoklassen von Pseudoelementen zu unterscheiden.
CSS::before Pseudo-Element
Das::before Pseudo- -Element fugt Inhalt hinzu, der vor einem Element auf einer Webseite erscheint. Oft wird dieses Element verwendet, um Text vor einem Absatz hinzuzufugen.
Die Syntax des::before-Pseudo-Elements ist:
Der::before-Selektor ist wird nach dem Namen des Elements hinzugefugt, auf das Sie den Selektor anwenden möchten.
Hier sind die Hauptkomponenten des::before-Pseudoelements:
selector bezieht sich auf den Selektor, auf den::before angewendet werden soll. Wenn Sie also ein::before-Element auf jedes "a‚"-Tag anwenden m√∂chten, w√§re Ihr Selektor "a‚". Oder wenn Sie wollte mich bewerben::before element Vor jedem Element mit dem Klassennamen "link‚" wurden Sie ".link‚" Selektor.
::before weist den Browser an, den Inhalt der CSS-Regeln vor dem Selektor hinzuzufugen.
CSS-Regeln sind die Regeln, die vor dem Selektor angewendet werden sollten.
Wenn Sie mehr uber die Funktionsweise von Selektoren in CSS erfahren möchten, lesen Sie unseren Leitfaden zu CSS-Selektoren.
Lassen Sie uns ein Beispiel durchgehen, um zu demonstrieren, wie das::before-Pseudoelement funktioniert.
Angenommen, wir möchten einen Link hinzufugen Emoji () vor jedem Link auf einer Beispielwebseite. Wir könnten diese Aufgabe mit dem folgenden Code erledigen:
Unser Code gibt zuruck:
In unserer HTML-Datei haben wir eine HTML & lt;a> Tag, der auf die Karriere-Karma-Homepage verweist. Dann haben wir in unserer CSS-Datei das Pseudo-Element::before verwendet, um das Link-Emoji vor jedem Tag auf unserer Webseite.
Wir haben dies erreicht, indem wir eine content-Eigenschaft in unserer CSS-Datei angegeben haben, die wie folgt aussieht:
Sie können kein HTML-Element in das content-Attribut einfugen.
Das CSS::after Pseudo-Element
Das CSS::after Pseudo-Element ermöglicht das Hinzufugen von Inhalten unmittelbar nach einem Element auf eine Webseite. Wie der::before-Selektor wird::after oft mit Links oder Textabsätzen verwendet.
Das Die Syntax des::after Pseudo-Elements ist wie folgt:
Die Syntax fur::after ist dieselbe wie die Syntax fur das::before-Pseudoelement.::after akzeptiert dieselben Werte fur den "Inhalt‚" Attribut, das wir zuvor besprochen haben.
::after CSS-Beispiel
Angenommen, wir entwerfen ein Link-Element auf einer Website fur eine B√§ckerei namens Hansons Bakery. Dieser Link sollte den Text "Gehe zur Homepage von Hansons Bakery anzeigen.‚" Unser Link sollte von einem 1px breiten schwarzen Rahmen umgeben sein.
Nach unserem Etikett m√∂chten wir, dass ein Textfeld mit dem Inhalt erscheint. Diese Seite zeigt unser Backwarenmenu. (Beachten Sie den Leerraum vor dem Wort "Dies‚" .) Unsere Box sollte eine orangefarbene HTML-Hintergrundfarbe haben.
Diese Aufgabe könnten wir mit dem folgenden Code ausfuhren:
Unser Code hat Inhalt generiert, der wie folgt aussieht:
In unserer CSS-Datei haben wir um jedes Element mit dem Klassennamen .label einen 1px breiten durchgehenden schwarzen Rahmen angewendet.
Dann haben wir den::after Selektor, um die oben beschriebene Textbox zu erstellen. Die Textbox zeigt den Inhalt "Diese Seite zeigt unsere Backwarenkarte.‚" Unsere Box hat einen orangefarbenen Hintergrund.
Schlussfolgerung
Die Pseudoelemente::before und::after ermöglichen es Ihnen, Inhalt zu einem bestimmten Teil eines Elements hinzuzufugen, das Sie in einer CSS-Regel ausgewählt haben. Zum Beispiel könnte der::before-Selektor verwendet werden, um Text vor einem Link hinzuzufugen. Der::after-Selektor könnte verwendet werden, um ein Emoji nach einem Textabsatz hinzuzufugen.
In diesem Tutorial wurden anhand von Beispielen die Grundlagen von Pseudo-Elementen in CSS und die Verwendung der::before- und::after-Pseudoelemente erläutert. Jetzt sind Sie bereit, die Pseudoelemente::before und::after in Ihrem CSS-Code wie ein professioneller Webdesigner zu verwenden.
Fur Ratschläge zu den wichtigsten Lernressourcen, Buchern und Kursen fur CSS-Webentwickler , lesen Sie unseren Leitfaden zum Erlernen von CSS.
