Todos sabemos que en una página web nunca debemos dejar en formato de texto plano y sin proteger, los nombres de las direcciones de correo. Cualquier robot spammer que ande por ahí a la busca de emails, no tardará mucho en apuntarse las nuestras.

Hay varias formas de enmascarar las direcciones de email y ocultarlas a los spammers, por ejemplo, mediante código javascript, o creando una imagen jpg o png con el nombre de email y colocarla en la web en lugar del texto plano, esta última es mi preferida.

Hay otra forma de hacerlo, no se si es de las más seguras o no, pero es bastante ingeniosa. Se trata de usar reglas CSS y la propiedad :after.

1. En nuestro archivo de estilos, por ejemplo default.css, añadimos la siguiente regla.

#em-info:after {
    content: "info\40 midominio.com";
}

Con esta regla lo que hacemos es indicar que el valor de la propiedad “content” se escriba después del texto que tenga el id “em-info”.

\40 es el valor hexadecimal del caracter “@”

Recordemos que en CSS, los caracteres escapados se representan con una barra invertida “\” seguido del valor hexadecimal del caracter y un espacio para identificar el final del número. Si sustituimos algunos caracteres más, o incluso todos, por sus correspondientes valores hexadecimales, podemos hacer que no sea fácil detectar esa dirección de email. Podemos sacar los valores hexadecimales de esta tabla, y echar un vistazo a la web de W3C para más información.

2. Una vez creada la regla CSS, tan solo tenemos que añadir en el código de nuestra página web, algo como esto.

<p id="em-info">Email: </p>