Hinzufügen oder Ändern von Inhalten mit der css-Klasse ::before

Hinzufügen oder Ersetzen eines Textes mit dem Pseudo-Element ::before

Manchmal möchten Sie vielleicht einen Text vor einem Preis hinzufügen oder einfach einen Text ersetzen. Wir schlagen unseren Kunden manchmal vor, dass Sie das Kennzeichen "News" für etwas anderes verwenden können, indem Sie einen anderen Text für dieses Kennzeichen schneiden, da es leicht ein- und ausgeschaltet werden kann. In diesem Beispiel werden wir jedoch den Text für "Rabatt" durch einen beliebigen Text ersetzen. Diese Lösung wird sowohl in der Produktauflistung als auch auf der Produktseite angewendet.

Links:
https://www.w3schools.com/css/css_pseudo_elements.asp
https://www.w3schools.com/cssref/sel_lang.php

Schritt 1: Identifizieren Sie die Klasse und den Ort

Bestimmen Sie, welche Klasse das ::before-Element enthalten soll. Idealerweise sollte es in der gleichen Klasse wie der Originaltext liegen. Da unsere Produkte mehrere verschiedene Flaggen haben können, müssen Sie sehr genau sein. Wenn Sie sich die obige Folie ansehen, können Sie erkennen, dass der Text für "Sonderangebot" ist. Daher ist es gut, diese Klasse einzubeziehen, damit Sie absolut sicher sind, dass Sie den Text nur auf dieser speziellen Folie ändern.

Schritt 2: Hinzufügen eines ::before-Elements

Da wir nun wissen, wo der neue Text platziert werden soll, und wir wissen, dass er nur für die Flagge "Sonderangebote" gelten soll, fügen wir der letzten Klasse das ::before-Element hinzu. Damit ein ::before- oder ::after-Element existieren kann, müssen wir einen deklarieren content: " "; in das wir unseren neuen Text schreiben. Wir müssen auch eine Schriftgröße definieren, da wir den ursprünglichen Text ausblenden wollen, indem wir font-size:0; setzen;

Schritt 3: Ausblenden des ursprünglichen Textes

Nachdem wir den vorigen Schritt ausgeführt und unseren Text eingefügt haben, sehen wir, dass der ursprüngliche Text noch vorhanden ist. Da sich unser neuer Text nun in einem ::before-Element befindet, das über eine eigene Formatierung verfügt, können wir jetzt nur den standardmäßig generierten Text anpassen. Anstatt unser ::before-Element auszuwählen, kehren wir zu der in Schritt 1 identifizierten Klasse zurück und setzen font-size: 0; und display:block;. Da wir in Schritt 2 eine benutzerdefinierte Textgröße für unser ::before-Element festgelegt haben, nimmt dieses Element NICHT die Größe font-size:0; an, sondern behält die in Schritt 2 festgelegte Größe bei.

CSS für verschiedene Sprachen

Wenn Sie eine Seite mit verschiedenen Sprachen haben, müssen Sie für jede Sprache ein ::before-Element in CSS einfügen. Am einfachsten geht das, wenn Sie :lang(en) vor Ihren Klassen verwenden.

Beispiel:
:lang(en) .tws-article-labels--special-offer .tws-article-labels--label-text::before