Text mit CSS hinzufügen, ersetzen oder ändern

Hallo Leute,

In diesem Tutorial werden wir sehen, wie wir einen Text über CSS hinzufügen können, sogar als Ersatz für einen vorhandenen Text.

Natürlich gibt es andere bessere Methoden, die PHP zu modifizieren (wenn Ihre Website mit WordPress erstellt wurde), aber wenn wir eine schnelle Lösung wollen oder nicht wissen, wie wir es anders machen sollen, kann es uns aus mehr als einer herausholen Problem.

Wie wir in diesem Tutorial sehen werden, ist dies mit ein wenig CSS sehr einfach.

Insbesondere werden wir lernen, einen Text vor einem anderen vorhandenen Text hinzuzufügen, ihn nach dem vorhandenen Text hinzuzufügen oder ihn durch den gewünschten zu ersetzen.

Lassen Sie uns einen echten Fall machen, um es klarer zu machen.

Hier ist das Video-Tutorial:

Im folgenden Bild sehen wir einige Produkte mit ihrem Produktnamen:

Sehen wir uns an, wie man ein Wort vor dem Produktnamen hinzufügt.

Dazu verwenden wir den Elementinspektor, um zu sehen, wo das CSS hinzugefügt werden muss.

Wir klicken mit der rechten Maustaste auf einen der Titel und sehen ein Bild wie das folgende:

Wir können sehen, dass rechts ein +-Zeichen ist, wir klicken darauf und die folgende leere CSS-Regel wird angezeigt:

Da wir als erstes einen Text vor dem Titel hinzufügen, ergänzen wir die CSS-Regel wie folgt:

h2.woocommerce-loop-product__title:before {
	content: "Producto ";
}

Mit dem vorherigen Code erhalten wir, dass das Wort Produkt in allen unseren Titeln erscheint:

Wenn wir es hinter dem Titel des Produkts haben wollen, ändern wir die Regel wie folgt:

h2.woocommerce-loop-product__title:after {
	content: "Producto ";
}

Wenn wir den Text durch das gewünschte Wort ersetzen möchten, müssen wir den folgenden Code hinzufügen:

h2.woocommerce-loop-product__title {
	visibility: hidden;
}

h2.woocommerce-loop-product__title:before {
	content: " Producto ";
	visibility:visible;
}

Auf diese Weise verbergen wir zuerst den Namen des Produkts und machen dann das gewünschte Wort sichtbar.

Das Endergebnis wäre:

Denken Sie daran, dass wir diese Änderungen zu unserem WordPress hinzufügen müssen.

Dazu gehen wir zu Anpassen -> Zusätzliches CSS und fügen unseren Code hinzu:

Manchmal können wir mit ein wenig CSS aus interessanten Schlamassel herauskommen.

Ich hoffe, Sie finden es nützlich und bei Fragen haben Sie mich hier 😉