Esconda o sinal de arroba para evitar spam e malware

Você já deve saber que não é legal colocar “seuemail@qualquercoisa.com” em página web porque existem programas de varredura que catam endereços nos sites para armazenar em bancos de dados mal intencionados. Eles podem vendê-los a empresas safadas que curtem mandar spam ou usar para mandar mensagens maliciosas com vírus, phishing, cavalo de troia e o escambau.

Para evitar isso, você pode criar uma imagem com seu endereço de e-mail, digitar seuemail(arroba)qualquercoisa.com ou simplesmente escrever seuemailgmail.com camuflando a arroba. Tente copiar esse último endereço e você vai perceber que a arroba é uma ilusão de ótica. Com CSS3 é bem fácil mostrar o sinal de arroba aos visitantes do site e ao mesmo tempo escondê-lo dos programas que catam e-mails.

Vá a até a folha de estilos e digite uma regra com a propriedade content usando :before ou :after no seletor.

Exemplo de regra usando before:

.arroba:before {content:"@";}

Em HTML digite:

contato<span class='arroba'>htmhelen.com</span>

» Vai aparecer: contatohtmhelen.com.

Exemplo usando after:

.email:after {content:"@";}

Em HTML digite:

<span class='email'>contato</span>htmhelen.com

» Vai aparecer: contatohtmhelen.com.

Como você já deve ter percebido, a propriedade content insere conteúdo antes (before) ou depois (after) do seletor escolhido.

Até mais!

Dica do Danillo Cesar