Translating Text That's In A CSS content="my text here" Style

If you have an element for example a div with a ::before pseudo-element:

<div>::before</div>

The content of ::pseudo is determined by the CSS content style. To translate the text of the content style, we'll need to overwrite that CSS for each language. This can be done entirely from SiteTran.

For example:

<style>
    .yourClassOrOtherSelector:before {
        content: “Your Translation Goes Here" !important;
    }
</style>

Note: We’re using 1 colon in the :before instead of 2 because it matches both 1 or 2 colons, and it has better browser support.

Follow the instructions for updating CSS by language in this article. For each language on your site, create a CSS override with a URL Selector that matches your page so that those styles only appear on the relevant page with the content style that should be translated.

Replace the .yourClassOrOtherSelector with your class or selector that matches, and the Your Translation Goes Here text with your translation.

Second Note: You can add the original phrase(s) found in your content style to a Page Doc in order to get them translated. Content styles contain one of the rare phrase types of that won't get added via the Phrase Discovery system. After you've added and translated the phrases from your content style like you would any other phrase, proceed to add the CSS style for each language as described above, using translations from the Page Doc in the CSS for Your Translation Goes Here in our example.