How To Hide Your Email Address Using CSS

Email bots are analysing your HTML files constantly looking for email addresses to harvest. Want a simple way of completely hiding it using just CSS?

The Other Techniques

There are numerous techniques for hiding an email address from bots - putting the address in an image, injecting HTML using Javascript, inserting HTML server-side using PHP, changing the characters to their Hex equivalents, using some form of CAPTCHA eg reCAPTCHA from Google, fill-in forms instead, typing it with extra letters and asking the user to remove them before use - the list is endless.

The CSS Way

This approach uses the :before and :after Pseudo-elements in CSS to split the email address up into two components. All of the email address information is hidden within the CSS file and nothing exists within the HTML file.

CSS

.email-address:before {
    content: "fred";
}
.email-address:after {
    content: "@smith.com";
}
 

The HTML file doesn't contain your email address at all. Given that email bots don't normally trawl the CSS files, just the HTML files, it should therefore not be found. Just in case the CSS is trawled, the email address has been split into two components, the first part in the :before and the last part in the :after. If you aren't worried about this case, the full address could go into the :before and ditch the :after. The HTML to use it is a simple <span> or similar using the above class.

HTML5

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <p>Get in touch here <span class = 'email-address'></span></p>
  </body>
</html>
 

If you want you can also call the class something obscure, for example class = 'mySpan' just to completely remove any mention of email from the HTML. As well as this technique, you can combine one of the other techniques and convert characters to their hex equivalent so even a cursory scan of the CSS stylesheet won't show up the address but this is possibly a step too far in terms of paranoia! Of course, a human reader can decipher it but that is not who we are worried about is it - after all the whole point of putting your email address on your web page is get humans to read it isn't it? Inevitably any technique is only useful up until the point that enough people use it to make it worthwhile for bots to be updated to include it - so Ssshh don't tell anybody...