Skip Navigation

This thread is resolved. Here is a description of the problem and solution.

Problem:
If you're trying to translate ::after elements in your website and cannot find them in the Advanced Translation Editor, follow these steps for a solution.
Solution:
1. Add the following CSS to the custom CSS section of your theme:

<!-- For German language --><br />html[lang="de-DE"] #wpforms-10211-field_9-container .choice-1 .wpforms-image-choices-label::after {<br />    content: "DE - \A\Mit dem Paddel samt integrierten\A\ Thermometer kannst du beim Einheizen \A\ das Wasser umrühren, damit sich die\A\ Wärme gleichmäßig verteilt, und dabei ganz \A\ bequem die Temperatur ablesen.\A\ \A\ Kiefer-Vollholz\A\Länge: 90 cm\A\ Breite: 16 cm";<br />}<br /><br /><!-- For Slovak language --><br />html[lang="sv-SE"] #wpforms-10211-field_9-container .choice-1 .wpforms-image-choices-label::after {<br />    content: "SV - Vďaka lopatke a integrovanému teplomeru môžete vodu počas ohrievania miešať, aby sa teplo rovnomerne rozložilo a aby ste mohli ľahko odčítať teplotu. Masívne borovicové drevo Dĺžka: 90 cm Šírka: 16 cm";<br />}<br /><br /><!-- For English language --><br />html[lang="en-US"] #wpforms-10211-field_9-container .choice-1 .wpforms-image-choices-label::after {<br />    content: "EN - \A\With the paddle and integrated\A\ thermometer, you can \A\ stir the water while heating it up so that the\A\ heat is distributed evenly, and you can easily read the temperature.\A\ \A\ Solid pine wood\A\Length: 90 cm\A\ Width: 16 cm";<br />}

2. Clear all types of site/server/CDN cache to ensure the changes reflect correctly in all languages.
3. Update the translation as needed based on the test translation we added.

If this solution does not apply to your case, or if it seems outdated, we highly recommend checking related known issues at https://wpml.org/known-issues/, verifying the version of the permanent fix, and confirming that you have installed the latest versions of themes and plugins. If issues persist, please open a new support ticket.

This is the technical support forum for WPML - the multilingual WordPress plugin.

Everyone can read, but only WPML clients can post here. WPML team is replying on the forum 6 days per week, 22 hours per day.

Tagged: 

This topic contains 3 replies, has 1 voice.

Last updated by Noman 1 month ago.

Assisted by: Noman.

Author Posts
May 23, 2025 at 10:23 am #17065481

nicolasF-39

Background of the issue:
I am trying to translate some ::after elements I added to my website hidden link but I do not find them in the Advanced Translation Editor.

Symptoms:
I cannot find the ::after elements in the Advanced Translation Editor for translation.

Questions:
How can I translate ::after elements using WPML?

May 23, 2025 at 12:40 pm #17066301

Bruno Kos
WPML Supporter since 12/2018

Languages: English (English ) German (Deutsch ) French (Français )

Timezone: Europe/Zagreb (GMT+02:00)

Hi,

WPML does not handle CSS pseudo-elements like ::after and ::before because they are typically defined in stylesheets or inline styles, not in the translatable content of your pages.

You can use the html[lang] attribute in your CSS to deliver different ::after content based on the active language.

e.g.

/* English */
html[lang="en"] .your-element::after {
  content: "Read more";
}

/* German */
html[lang="de"] .your-element::after {
  content: "Mehr erfahren";
}

Can you try something like that?

May 23, 2025 at 1:52 pm #17066752

nicolasF-39

Hi I tried it but it does not seem to work. On the german site it does not have "de" in the url because its the original language. Is that a problem?

See the picture attached...

Bildschirmfoto-2025-05-23-um-15.51.07.jpg
May 25, 2025 at 9:22 am #17069580

Noman
WPML Supporter since 06/2016

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Hi,

Thank you for contacting WPML Support. No, it should not be a problem, Could you please try to follow the below steps and see if this resolves the issue:

1. Add the below CSS in custom CSS section of the theme:

/* For German language */
html[lang="de-DE"] #wpforms-10211-field_9-container .choice-1 .wpforms-image-choices-label::after {
	content: "DE - \A\Mit dem Paddel samt integrierten\A\ Thermometer kannst du beim Einheizen \A\ das Wasser umrühren, damit sich die\A\ Wärme gleichmäßig verteilt, und dabei ganz \A\ bequem die Temperatur ablesen.\A\ \A\ Kiefer-Vollholz\A\Länge: 90 cm\A\ Breite: 16 cm";
}

/* For Slovak language */
html[lang="sv-SE"] #wpforms-10211-field_9-container .choice-1 .wpforms-image-choices-label::after {
	content: "SV - Vďaka lopatke a integrovanému teplomeru môžete vodu počas ohrievania miešať, aby sa teplo rovnomerne rozložilo a aby ste mohli ľahko odčítať teplotu. Masívne borovicové drevo Dĺžka: 90 cm Šírka: 16 cm";
}

/* For English language */
html[lang="en-US"] #wpforms-10211-field_9-container .choice-1 .wpforms-image-choices-label::after {
	content: "EN - \A\With the paddle and integrated\A\ thermometer, you can \A\ stir the water while heating it up so that the\A\ heat is distributed evenly, and you can easily read the temperature.\A\ \A\ Solid pine wood\A\Length: 90 cm\A\ Width: 16 cm";
}

2. Clear all sorts of site/server/CDN cache and see if it reflects correctly in all languages.

3. I just added the test translation, you should be able to update the translation according to your needs.

Kindly let me know the results,
Thank you