Add or modify content with the css class ::before

Add or replace a text with the pseudo-element ::before

Sometimes you may want to add a text before a price or simply replace a text. We sometimes suggest to our clients that you can use the "News" flag for something else, by slicing another text for that flag, as it can be easily switched on and off. In this example, however, we will change the text for discount to any text. This solution is applied in both the Product Listing and the Product Page.

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

Step 1: Identify class and location

Identify which class should have the ::before element. Ideally, it should be on the same class as the original text. Note that since our products can have several different flags, you need to be specific. Looking at the slide above, you can identify that the text is for "Special-offer", therefore it is good to include that class so you are absolutely sure that you only change the text on that specific slide.

Step 2: Add a ::before element

Now that we have identified where to put our new text and know that we need to specify that it only applies to the "special-offers" flag, we add the ::before element to the last class. In order for a ::before or ::after element to exist, we need to declare a content: " "; where we write our new text. We also need to define a font-size because we will then hide the original text by setting
font-size: 0;

Step 3: Hiding the original text

Once we have done the previous step and have our text in place, we will see that the original text is still there. Since our new text is now in a ::before element that has its own styling, we can now adjust only the default generated text. Instead of selecting our ::before, we go back to the class we identified in Step 1 and set font-size: 0; and display:block;. Since in Step 2 we set a custom text size for our ::before element, this element does NOT take up font-size: 0 but retains its size as we set in Step 2.

CSS for different languages

If you have a page with different languages, you need to CSS in a ::before for each language. The easiest way to do this is to use :lang(en) before your classes.

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