Blog

My blog.

E-mail obfuscation via CSS

<- Why I hate greylistingI have revoked my GPG key. ->
2021-08-01T19:02:03Z

Nobody likes spam. And nobody wants to put their e-mail address on the front of a website for it to get found by spammers. (Small thing I noticed, if you register a domain and put your e-mail address as a mailto:, you will 90% get SEO/website design spam, I had the experiment running for around 10 days while I registered semisol.net for DNS stuff, and now used for Mastodon, and I got around 50 e-mails)

And people try to obfuscate their e-mails. They do things like:

And that mostly works, but bots can work around that. Some people use JS. And JS isn't ideal. People have it disabled and too many libraries cause very slow loading times and bloat. (I am moving from mostly JS required to JS optional, or no JS whenever possible.)

So, let's get to the actual reason for this.

Obfuscating your e-mail via CSS

Well, it isn't that hard. The most basic is the following:

&lt;span class="email-address" tabindex="0"&gt;&lt;/span&gt;
.email-address::after {
  content: "click to reveal";
}
.email-address:focus {
  outline: none;
  /* visual indicator for TAB key users */
  text-decoration: underline 2px #0079ff;
}
.email-address:focus::after {
  content: "test at domain dot invalid";
}

The obfuscation in the e-mail is there to prevent anything else, which might help, or if you want to go more hardcore:

&lt;span class="email-address" tabindex="0"&gt;
&lt;span class="email-address-1"&gt;&lt;/span&gt;
&lt;span class="email-address-2"&gt;&lt;/span&gt;
&lt;span class="email-address-3"&gt;&lt;/span&gt;
&lt;/span&gt;
.email-address &gt; .email-address-1::after {
  content: "click to reveal";
}
.email-address:focus {
  outline: none;
  /* visual indicator for TAB key users */
  text-decoration: underline 2px #0079ff;
}
.email-address:focus &gt; .email-address-1::after {
  content: "test";
}
.email-address:focus &gt; .email-address-2::after {
  content: " at domain";
}
.email-address:focus &gt; .email-address-3::after {
  content: " dot invalid";
}

Both of those work. But they won't protect you from manual e-mail harvesters.