There's actually an easier solution to your problem. Any sane template (including all templates that come with the Joomla CMS) will set the lang
attribute on the HTML element. This enables you to use the CSS :lang()
pseudo-selector.
You're example would look like this:
li.artist:lang(en):before {content:"Artist: "}
li.artist:lang(it):before {content:"Artista: "}
li.artist:lang(de):before {content:"Künstler"}
This has a couple of advantages.
For starters, it will work regardless of Template or even with solutions other than Joomla as it's all done in the Browser.
Also it will work fine with embedded parts in other languages, as long as the lang
attribute is set correctly. For example:
<html lang="en">
<head>
<style>
blockquote:lang(de) { color: red; }
blockquote:lang(en) { color: red; }
</style>
</head>
<body>
<p>A famous German quote is:</p>
<blockquote lang="de">
<p>Den Wald vor lauter Bäumen nicht sehen</p>
</blockquote>
<p>A famous English quote is:</p>
<blockquote>
<p>Listen to many, speak to a few.</p>
</blockquote>
<body>
</html>
Lastly, Joomla doesn't just output the language but the locale. So your one site might use en-GB, another en-US and the template will reflect that. Using :lang(en)
will match either, but you could also use :lang(en-US)
to only target American English.