Hide Email Address From SPAM Bots With CSS on Web Pages

It is very irritating when you see your inbox with many spam emails. SPAM is one of the most irritating things on the internet. Many people ask me the way by which these spammers get our email id to spam. Spammers got our email id by spam bots which crawl websites and collect the email ids. These bots read every web page available on the internet and then stores the found email ids in its database. But you can protect your email ids from these spammers with CSS. Use this simple CSS trick when you have to display your Email on your website.

If you cannot remove your email address from your website, but want to spammers away, there are few ways to keep your email address on the page but hidden from bots. There are many ways to do this, but this article is only about using CSS to hide your email address from bots

1. RTL way

In this method, we put an email address in reverse order and use CSS to reverse it to look fine on the web page.

Use this code:

CSS

span.test {
direction: rtl; unicode-bidi:bidi-override;
}

HTML:

<span class="test">[email protected]</span></p>

This CSS code reverses the direction of the text. You write your email backward on the page, and CSS display it fine on the web page. But the SPAM bots get the reverse email id. Thus, your email id is now safe from these automated bots.

2. CSS Pseudo-class

I found this one on Labnol.org. This method protects your email address in a better way. The only downside of this approach is that users will not be able to copy your email address.

<style> 
my-email::after { content: attr(data-domain); } 
my-email::before { content: attr(data-user) "\0040"; } 
</style> 
<!-- Set data-user and data-domain as your email username and domain respectively --> 

<my-email data-user="john" data-domain="gmail.com"></my-email>.

This is the other approach but it allows users to copy data.

<style>
  .domain::before {
    content: "\0040";    /* Unicode character for @ symbol */
  }
</style>

john<span class="domain">abc.com</span>

There are many other approaches you can try. If you really do not want spam bots to see your email address, either stop putting it on a web page or hide it behind the captcha. The methods above are also fine and you can try these as well. Few approaches use JS as well. In this article, I just focused on CSS only ways.