Nobody likes to receive spam. There are several ways to avoid your email address found by a spambot. For example you could use HTML character entities, Javascript, CAPTCHA etc. It just makes the address readable for humans and not for spambots. Some of those techniques work better then others, but here's a new way of hiding your mail address. Simply by using CSS

Too bad that there's just one big catch when using this technique: It doesn't work on Internet Explorer (IE) (yet). This is because IE doesn't support CSS generated content, something which is implemented in Firefox and other webbrowsers. I'm still sharing this knowledge with you, because I think this is very useful and IE will support generated content later on.

/* \40 will turn into the "@" symbol */
#email:after{
  content: " <admin\40marcofolio.net>";
  }

<p id="email">Webmaster</p>

Yes I know, it's not very usual to use the id attribute on the p tag. To avoid this, you can use the address-tag. Your code will look like this:

/* \40 will turn into the "@" symbol */
address:after{
  content: " <admin\40marcofolio.net>";
  }

<address>© Marcofolio</address>

Hope that spambots will not get any smarter to also get mail addresses this way!

Interested in this topic? You might enjoy another article I've written called

• Experimenting with the element() CSS function
• Why you want to use the :any() CSS selector
• Webkit Bug: Hover and Sibling Selector
• Offline ways to keep your creative fluids going
• New CSS3 properties added to Firefox 3.6

Did you like this article? Subscribe to my feed or email to keep updated on new articles.

Spread the word and submit to: