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
The CSS Way
This approach uses the
: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.
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
If you aren't worried about this case, the full address could go into the
:before and ditch the
The HTML to use it is a simple
<span> or similar using the above class.
<p>Get in touch here <span class = 'email-address'></span></p>
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...