Hiding Emails from Spam Bots: The CSS3 Way

Hiding emails from spam bots can be really painful, but fortunately there are a lot of cool solutions out there. Here’s how you can do this with the CSS3 generated content and reversed text direction.

Let’s say that email you want to obfuscate is info@company.com. The first thing you need to do it to reverse it, so it looks like this: moc.ynapmoc@ofni. For instance, you can do this online here. The rest is CSS:

• In your style sheets, create a new .contact rule.
• Add the reversed string as value of the content property of your .contact rule.
• Set the direction of the text as right to left via direction and unicode-bidi.
• Use the .contact element in your markup.

The CSS

[sourcecode language=”css”]
.contact::before
{
    content: "moc.ynapmoc@ofni";
    direction: rtl;
    unicode-bidi: bidi-override;
    text-decoration: underline;
    color: #00f;
}
[/sourcecode]

The Markup

[sourcecode language=”html”]
<p>To contact us, send an email
to <span class="contact"></span>.</p>
[/sourcecode]

… And everything will look just right when you view it in the browser:

The drawback of this approach is that CSS3 generated content cannot be selected and copied, which is a usability issue, but this is just an idea and there are many other solutions worth trying.

One small consideration, regarding the syntax of generated content. Older browsers do not recognize the ::before or ::after double column syntax, so you may want to consider using :before / :after. Since this is just syntactical enhancement to distinguish pseudo elements (hover, active, etc) from generated content (before, after), introduced in CSS3, newer browsers understand both syntaxes, so  you can use the “old” syntax without concern.

Related Posts and Links