4

Tenho um web-site que está disponível em diversas línguas, e para não ter que refazer toda a estrutura de um slider de imagens, existe um pequeno texto que no momento está a ser aplicado através do seletor :before (Inglês) fazendo uso da propriedade content (Inglês):

Exemplo no 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;
}

Problema

A solução actualmente em uso requer que o texto esteja na folha de estilos do web-site, o que inviabiliza (de certa forma) a sua tradução!

Pergunta

Como posso aplicar a propriedade content ao seletor :before sem recorrer à folha de estilos?

Fazendo uso do atributo style ou recorrendo a JavaScript como último recurso!

1 Resposta 1

8

Use content:attr(atributo), segue um exemplo:

HTML

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

CSS

div:after {
content:attr(data-text);
}
2
  • Importante ressaltar que essa tecnica nao funciona em IE<8, caso voce ainda precise dar suporte. Nesse caso adicione um elemento e defina o show/hide com a classe ie7 na sua tag HTML condicional. Commented 29/01/2014 às 3:50
  • @JoãoCunha, não achei que valia a pena comentar já que pseudo elementos :after e :before, que ele já usa hoje, só são suportados a partir da versão 8 do IE.
    – Cleiton
    Commented 29/01/2014 às 4:06

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .