Javascript Css Nach

| | | | | | | | | | | | | | | | | | | | | | | | | | | | |

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:

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:

Screenshot From 2020 12 09 08 00 16

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:

content: "Ôîó‚";

Unsere Regel hat am Anfang unseres -Tags, das wir erstellt haben, ein Link-Emoji hinzugefugt.

Der Wert fur das Attribut "content‚" kann sein:

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:

Screenshot From 2020 12 09 08 00 47 1

In unserem Code haben wir einen Link zu unserer Homepage mit einem Schild. Der mit unserem Link verbundene Klassenname ist .label.

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.