<h1 title="Filthy"><a href="#">Filthy</a></h1>

h1:after {
content: attr(title);
}


Google Translate translates @title because it’s visible as tooltips, so the translated version works fine.

Cobey, Martijn, it is a brain-bender! I can see advantages on either side. Thanks for brainstorming with me. I wonder who else is talking about this….

CSS’ content: should not hold actual content other than for styling purposes. Therefore it does (normally) not need to be translated, just like it should not be indexed by Google. The style of a page does not need to be indexed, this should go for CSS’ content: too. If not CSS will be a new markup or even coding language, something it should never become—hence complaints on things like CSS variables and animations.

The fact I added emphasises to normally should not be overseen. I do believe that in cases where the content: adds meaningful text—like the one you have on the screenshot—it needs to be translated. Meaningful in this case is not defined as having meaning through HTML markup, but defined as meaning something when read. This holds through even if it’s just added shading.

The content: stands for presentational content. Of course even content meant for presentational purposes only needs to be translated to make any sense.

The real question is: should automatic translation services (like Google Translate) mind presentational content or should it stick to the content that has been defined to be content by the HTML?

For translations you control, you can easily serve CSS with different “content:” for different “Accept-Language”s.

But after a few minutes’ thought, an even easier method would be to have a common CSS file for the general styling, then a language-specific file (linked separately from each translation) for each language. For example, style.css and content.lang.css.

You could still use this system with Accept-Language if you preferred it that way.

Does CSS even attempt to insert that content into the DOM as a separate element or is it a ghost element? I feel like its hitched to the element (h1 in this case) that you are styling and can’t be accessed on its own via the DOM/JS. Its tightly coupled with the styled element.

So therefore (if thats the case) I don’t believe it has meaning and remains purely presentational. Is this a good idea… I’m on the fence. I’ll have to go with yes it should remain presentational because the HTML is the content with meaning and an outsider (in this case, the designer/developer) is “forcing” the content into the page, where the original author didn’t intend for that to happen.

Looking forward to other views.