Apply CSS property "content" without resorting to style sheet

Question

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

Example in Jsfiddle

HTML

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

CSS relevant

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 web-site style sheet, which makes it impossible (in a way) to translate it!

Question

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

^{Making use of the attribute style or by using Javascript as a last resort!}

Answer 1

Use content:attr(attribute), follow an example:

HTML

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

CSS

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