Translate Text In A CSS Content Style

Translating Text Inside a CSS content Style

Some websites display text using CSS rather than HTML. This is often done through pseudo-elements like :before or :after using the content property. For example:

<div class="label"></div>

.label:before {
  content: "Your text here";
}

This type of text isn’t detected by SiteTran's Phrase Discovery, so it must be handled manually. Fortunately, SiteTran supports full CSS overrides by language.

Step-by-Step Instructions

1. Identify the CSS Selector

Find the class or element selector that is applying the content property in your CSS. This will typically look like .label:before or .label::before.

Note: Use :before instead of ::before—it has broader browser support and matches both single and double colon syntax.

2. Manually Add the Phrase to a Page Doc

Since CSS content isn’t discovered automatically, go to your Page Doc and manually add the original phrase (e.g., "Your text here"). This allows the phrase to be translated like any standard text on your site.

3. Translate the Phrase

Use SiteTran’s interface to translate the manually added phrase into your supported languages.

4. Create CSS Overrides for Each Language

After translation, create a CSS override in SiteTran for each language. This override replaces the original content with the appropriate translation.

<style>
  .label:before {
    content: "Translated text here" !important;
  }
</style>

Make sure to replace .label with your actual selector, and Translated text here with the translated text from your Page Doc.

5. Use URL Selectors to Target Specific Pages

To ensure the override only applies on the appropriate page, use SiteTran’s URL Selector feature. This limits the custom style to the exact URL or set of URLs you specify.

Summary

• Phrases in CSS content styles won’t be auto-discovered.
• Add them manually to a Page Doc for translation.
• Use language-specific CSS overrides in SiteTran.
• Use !important to make sure your override is applied.
• Add a URL Selector to scope your override to the correct pages.

This ensures that even CSS-injected text is fully localized for every language your site supports.