i18n in CSS property "content"

Question

I'm using Java Web (Spring framework) and LESS as CSS preprocessor.

When applying internationalization on my project, I successfully migrated every message inside JSP and JS code in message.properties files. But I don't know if it's possible to do the same in CSS/LESS code. I really need to do it since there are messages inside a content property.

I already saw the solution using :lang selector, but it would be much better if I could import the messages from a central input file.

you can look for this post: [i18next css content](https://stackoverflow.com/a/54785373/6235602) — GerA, Feb 20 '19 at 11:39

score 15 · Accepted Answer · answered Oct 02 '17 at 13:29

I'm late to the party, but I want to point out an answer to another Stack Overflow question where it turns out that you can use an attr() value for the content property, referencing an attribute on the selected HTML elements. Shamelessly copying the example from the linked answer, you can write your HTML elements as:

<div class="myclass" data-content="My Content"></div>

and have the following CSS rule applied to them:

.myclass:before {
    content: attr(data-content);
}

actually showing "My Content" on the page. That basically means you can now use Spring i18n as:

<div class="myclass" data-content="<s:message code="content"/>"></div>

and complete your migration to message.properties files.

I actually solved it at the time and forgot to post the answer here. I solved it in the same way you did, but more specific selectors: `.translate-content[data-i18n-before]::before` and `.translate-content[data-i18n-after]::after` — Andrewmat, Feb 16 '18 at 19:44

i18n in CSS property "content"

1 Answers1