Apply CSS property "content" without resorting to style sheet

Asked

Viewed 523 times

4

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!

1 answer

8


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);
}
  • It is important to note that this technique does not work in IE<8, if Oce still needs to provide support. In this case add an element and set the show/Hide with the class ie7 in its conditional HTML tag.

  • @Joãocunha, I didn’t think it was worth commenting since pseudo elements :after and :before, which he already uses today, are only supported from version 8 of IE.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.