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) ")"; }
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
Deixe uma resposta