você está em: leonardofaria.netarquivoPseudo-seletores são legais

Pseudo-seletores são legais

28/10/2006 — Tags: , ,

Todo mundo lembra do pseudo-seletor :hover, quando quer fazer um simples efeito rollover em um link. Well, o que pouco sabe é que existe outros dois seletores muito bacanas: o :after e o :before.

Veja o exemplos:

input:before { content:" ";}
a:before { content:">";}
a:after { content: " (link externo) "; }
a:after { content: " (" attr(href) ")"}

O primeiro exemplo coloca um espaço (entidade  ) antes do conteúdo do botão. O segundo exemplo, coloca um marcador para cada link. Já o terceiro exemplo adiciona o texto "link externo" a todo link da página. Bem, e a última linha? Note o uso do attr(href). O que ele faz é simplesmente retornar o valor href do tag a. Ao invés do attr(href), você também pode usar outros atributos. Veja esse exemplo:

img:before { content: "Descrição da imagem: " attr(alt) }

Toda imagem será antecidida de: Descrição da imagem: (valor do atributo da imagem)


Sem comentários ainda

você pode deixar uma resposta, ou dar um trackback para seu site.

Deixe uma resposta


(não será publicado)


(use o serviço pastie.caboo.se para post de código).

Publicidade