Pseudo-seletores são legais

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)