Mostrando o idioma dos seus links

Postado por: Pedro Rogério em

Se você quiser mostrar em seus links os idiomas dos mesmos, existe um método muito simples, que usa a propriedade :after do CSS, seus links teriam a seguinte aparência: Aqui o link [pt-br].

O método consiste da seguinte forma:


<a href="url-do-link" hreflang="idioma">Texto do link</a>

O idioma será o da página em questão, por exemplo:


<a href="http://www.pinceladasdaweb.com.br" hreflang="pt-br">Pinceladas da Web</a>

O seu CSS fica da seguinte forma:


a[hreflang]:after {
   content: " ["attr(hreflang)"]";
   }

O que ocorre é que essa regra seleciona todo os links que tem o atributo hreflang e mostra para você o idioma dos mesmos. Veja aqui um exemplo dessa propriedade em ação. Ela não funciona no IE.

Posts Relacionados

Confira também outros artigos interessantes postados aqui no blog.

Gostou desse post?

Assine o nosso Feed RSS, siga-nos no Twitter, ou simplesmente nos recomende a seus amigos!

Sobre Pedro Rogério

Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o Pinceladas da Web também escreve para o CSS no Lanche, blog voltado ao desenvolvimento front-end.

One Response to “Mostrando o idioma dos seus links”

  1. “Ela não funciona no IE”
    Pra variar né hehehe.

    Bastante interessante essa regrinha.
    Abraços!!

Leave a Reply