Apply the CSS property "content" without resorting to the style sheet

Question:

I have a web-site that is available in several languages, and to avoid having to redo the entire structure of an image slider, there is a small text that is currently being applied through the :before (English) selector using the property content (English) :

Example in JSFIddle

HTML

<ul>
    <li class="active">1</li>
    <li>2</li>
    <li>3</li>
</ul>

CSS relevante

ul{
    display:block;
    margin:40px;
    position:relative;
}
ul:before{
    content: "imagens adicionais:";
    position:absolute;
    left:0;
    top:-26px;
    color:#7F8C8C;
    font-family:sans-serif;
}

Problem

The solution currently in use requires the text to be in the website's style sheet, which makes its translation unfeasible (in a way)!

Question

How can I apply the content property to the :before selector without resorting to the style sheet?

Making use of the style attribute or using JavaScript as a last resort!

Answer:

Use content:attr(attr), here is an example:

HTML

<div data-text='texto que será impresso no after'> </div>

CSS

div:after {
content:attr(data-text);
}
Scroll to Top