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

Navigation
4

I have a web-site that is available in several languages, and to not have to redo the entire structure of an image slider, there is a small text that is currently being applied through the :before (English) making use of 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 that the text be in the style sheet of the web-site, which makes some translation impossible!

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!

    
asked by anonymous 28.01.2014 / 23:32

1 answer

8

Use content: attr (attribute), here's an example:

HTML 

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

CSS 

div:after {
content:attr(data-text);
}
    
28.01.2014 / 23:37
In what order is the init () method invoked in the GO Language? Creating string in PHP