Um kleinere Änderungen an den Inhalten auf Deiner Webseite am Laptop oder PC vorzunehmen, kannst Du die Pseudo-Elemente before und after nutzen. Sie können die einiges an Arbeit beim Programmieren abnehmen. Wie das Ganze funktioniert und Wie Du before und after für Dich nutzen kannst, stellen wir Dir im Folgenden vor.
Inhalt
Worum handelt es sich bei before und after?
Im Zuge des Eingabebefehls von CSS Content werden die Elemente ::before und ::after genutzt. Dabei handelt es sich um sogenannte Pseudo-Elemente, die anderen HTML-Elementen hinzugefügt werden können, um zusätzliche visuelle und/oder ästhetische Effekte zu erzeugen.
Hierbei gilt: Man kann es vor ein Element (before) oder danach (after) setzen. Um was für einen Inhalt es sich bei dem entsprechenden Pseudo-Element handelt, kann unterschiedlich sein – egal, ob Texte, Listen oder Bilder.
Nutzung von before und after
Die Eingabe von before/after nutzt man daher oft, um bestehende Entwürfe mit diversen HTML-Elementen zu verbessern: Beispielsweise kann man ein Element mit einem before- und after-Element formatierten, um eine bestimmte Breite oder Höhe zu erzielen, oder um die Position des Elements zu ändern.
Oder man gebraucht die Eingabe, um ein Element visuell zu gestalten und/oder hervorzuheben. So finden sie Verwendung, um ein Menü oder einen Link zu verzieren. Sie können aber auch gebraucht werden, um ein Symbol oder ein Bild vor bzw. nach einem Element zu platzieren.
In diesem Zusammenhang praktisch: before und after können ebenfalls verwendet werden, um gewisse Elemente zu gruppieren. Zum Beispiel kannst Du das before-Pseudo-Element hinzufügen, wenn Du eine Liste von Elementen hast, um die Liste zu kennzeichnen; ein after-Element hingegen kannst Du nutzen, um diese zu beenden.
In CSS können diese Pseudo-Elemente mithilfe der „::before“- und „::after“-Syntax definiert werden.
Willst Du zum Beispiel die Farbe am Ende des Satzes „Wir lieben die Farbe Grün“ von Schwarz in Grün ändern, kannst Du das mit ::after tun.
Hierbei steht im HTML-Codeschnipsel …
<p class="text">Wir lieben die Farbe</p>… und in CSS würde dann entsprechend stehen:
.text::after{
content: "Grün";
color: green;
}Eingabe wie diese kannst Du auf die unterschiedlichste Weise und vielfältig nutzen. Die before-after-Syntax ermöglicht es daher, verschiedene Arten von Inhalten wie Grafiken, Texte, Listen, Hintergrundfarben und vieles mehr zu gestalten. Mit der richtigen Kombination von CSS-Anweisungen können before- und after-Elemente gleichermaßen in einem Design benutzt werden, um einzigartige und interessante Ergebnisse zu erzielen.
Achtung: In den meisten Fällen sollten before- und after-Elemente nur verwendet werden, um kleine Änderungen vorzunehmen, da sie bei falscher Anwendung die Seitenladezeit beeinträchtigen können.
Auf einen Blick
Mithilfe der Pseudo-Elemente before und after kann man Webdesigns verbessern und einzigartige visuelle Effekte erzeugen. Man gebraucht sie, um Elemente einzufügen, zu formatieren, zu gestalten und zu gruppieren. Sie tauchen in der Regel im Zusammenhang mit dem entsprechenden Content in CSS auf – in der Schreibweise „::before“ sowie „::after“.
FAQ zu before und after
Durch die Eingabe von „::before“ wird der Inhalt vor einem Element angepasst. Das kann auf unterschiedliche Weise geschehen, zum Beispiel kannst Du den Satzbeginn eines Satzes farblich anders gestalten.
Zuerst erstellst Du das entsprechende Bild im Code. Danach setzt Du die Pseudo-Elemente in den Code ein. Nun musst Du nur noch die Art und Weise definieren, in der das Bild angepasst werden soll – zum Beispiel seine Position, seine Farbgestaltung, etc.
Hierbei kannst Du ähnlich vorgehen. Zuerst erstellst Du den Text. Danach stellst Du die Parameter für den Text fest. Zum Schluss fügst Du die Pseudo-Elemente ein – mit den entsprechenden Änderungen für die Zeile.