Making CSS Content Properties Dynamic
One of the obvious issues with text content added to the page via CSS is that it is content stored in the visual presentation layer rather than the content (HTML) layer of the document. Because of this, whenever you need to update this content, you need to change the value of the content property in the CSS file. This is even more of an issue when thinking about internationalization and having to translate the generated content across different languages. Previously to achieve this, you’d have to have override stylesheets for each language and again hard-code the content to be output.
As of CSS3, however, you can generate the content from reading in the value assigned to any attribute on the HTML element that is receiving the generated pseudo-element. This means that not only are you able to keep the content in the right place, but you can change it based on region. Even better, it’s exceedingly easy to change the content using DOM scripting. All you need to do is call the attr() function as the value of the content property, like this:
p:after {
content: attr(data-after_content); }
On your paragraph element, just add the data-after_content attribute and give it whatever content you’d like output in the after pseudo-element.
When using the content property, though, keep in mind that the content will not be read by search engines or screen readers. Any essential content should still be part of the text content of the page.
