How to Hide your Email Address on Web Pages

Published in: CSS - Email

You have a website, you want to put your email address on the site so that people can contact you easily but you are also worried about spam flooding your mailbox once your email address begins to appear on a public web page.

Your concern is valid. The email harvesting bots, using simple regular expressions, will most definitely find your email address if it’s published in plain text but you may trick the less-clever bots by hiding your email address through simple CSS and JavaScript based techniques.

1. Hide Email through CSS

1a. CSS pseudo-classes

You can use the ::before and ::after pseudo-elements in CSS to insert the email username and domain name on either sides of the @ symbol. The bots, which are generally blind to CSS, will only see the @ sign while browsers will render the complete email address which, in this case, is

  my-email::after {
    content: attr(data-domain);
  my-email::before {
    content: attr(data-user);

<!-- Set data-user and data-domain as your
       email username and domain respectively -->

<my-email data-user="john" data-domain="">@</my-email>

Update: Here’s another version suggested by @orlie that makes the entry more obscure since the ”@” symbol is also inserted through the pseudo element.

  my-email::after {
    content: attr(data-domain);
  my-email::before {
    content: attr(data-user) "\0040";

<!-- Set data-user and data-domain as your
       email username and domain respectively -->

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

The downside with the above approach is that users won’t be able to select and copy your email address on the web page, they’ll have to write it down manually.

If you would prefer to use pseudo-elements but with a more user-friendly style that allows selection, you can try an alternate approach with all the email characters but the ”@” symbol are selectable.

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

john<span class="domain"></span>

1b. Reverse the direction

You can write your email address in reverse ( as and then use the unicode-bidi and direction CSS properties to instruct the browser to display the text in reverse (or correct) direction. The text is selectable but the address would copied in reverse direction.

  .reverse {
    unicode-bidi: bidi-override;
    direction: rtl;

<!-- write your email address in reverse -->
<span class="reverse"></span>

1c. Turn off ‘display’

You can add extra characters to your email address to confuse the spam bots and then use the CSS ‘display’ property to render your actual email address on the screen while hiding all the extra bits.

  #dummy {
    display: none;

<!-- You can add any number of z tags but they'll stay hidden -->
john<span id="dummy">REMOVE</span>@abc<span id="dummy">REMOVE</span>.com

2. Obfuscate Email through JavaScript

2a. Using the ‘onclick’ event

You can create a regular mailto hyperlink for your email address but replace some of the characters - like the dot and the @ sign - with text. Then add an onclick event to this hyperlink that will substitute the text with the actual symbols.

<a href = "mailto:johnATgmailDOTcom"
   onclick = "this.href=this.href
>Contact Me</a>

2b. Random Array

Split your email address into multiple parts and create an array in JavaScript out of these parts. Next join these parts in the correct order and use the .innerHTML property to add the email address to the web page.

<span id="email"></span>

  var parts = ["john", "abc", "com", "&#46;", "&#64;"];
  var email = parts[0] + parts[4] + parts[1] + parts[3] + parts[2];

3. WordPress + PHP

If you are on WordPress, you can also consider using the built-in antispambot() function to encode your email address. The function will encode the characters in your address to their HTML character entity (the letter a becomes a and the @ symbol becomes @) though they will render correctly in the browser.

<?php echo antispambot(""); ?>

You can also encode email addresses in the browser.

Finally, if you really don’t want spam bots to see your email address, either don’t put it on the web page or use Google’s reCAPTCHA service. It hide your email address behind a CAPTCHA - see example - and people will have to solve it correctly to see your email address.

📮  Subscribe to our Email Newsletter for Google tips and tutorials!
Published in: CSS - Email

Looking for something? Find here!

Meet the Author

Web Geek, Google Developer Expert
Amit Agarwal

Amit Agarwal is a Google Developer Expert in Google Workspace and Google Apps Script. He holds an engineering degree in Computer Science (I.I.T.) and is the first professional blogger in India. He is the developer of Mail Merge for Gmail and Document Studio. Read more on Lifehacker and YourStory

Get in touch

Google Add-ons

Do more with your Gmail and GSuite account

We build bespoke solutions that use the capabilities and the features of Google Workspace for automating business processes and driving work productivity.

  1. Mail Merge with Attachments
    Send personalized email to your Google Contact with a Google Sheet and Gmail
  2. Save Emails and Attachments
    Download email messages and file attachments from Gmail to your Google Drive
  3. Google Forms Email Notifications
    Send email notifications to multiple people when a new Google Form is submitted
  4. Document Studio
    Create beautiful pixel perfect documents merging data from Google Sheets and Google Forms
  5. Creator Studio for Google Slides
    Turn your Google Slides presentations into animated GIFs and videos for uploading to YouTube