CSS based email obfuscation

Although nowadays it's considered as a bad habit to obfuscate your email address putting up you email address without obfuscation still gets you spam despite better spam filtering

HTML

<a href="#" class="contact1">[email protected]</a>

<br />


<a href="#" class="contact2">
    your.name<span> AT </span>email.com
</a>

<br />

<a href="#" class="contact3"><span>your</span>name<span>email</span>com</a>

CSS

.contact1 {
    unicode-bidi:bidi-override; direction: rtl;
}

.contact2 span {
    font-size: 0px;
    line-height:0;
    text-shadow: none;
    color: transparent;
}

.contact2 span:before {
  content: "\0040";
  font-size:16px;
  color: blue;
  
}

.contact3 span:first-child:after {
  content: "\002e";
}
.contact3 span:last-child:before {
  content: "\0040";
}
.contact3 span:last-child:after {
  content: "\002e";
}

JavaScript

$(".contact1").live('mouseover', function() {
    $(this).removeClass('contact1');
    var e = $(this).text().split("").reverse().join("");
    $(this).text(e).attr('href', 'mailto:' + e);
});

$(".contact2").live('mouseover', function() {
    $(this).removeClass('contact2');
    var e = $(this).html()
        .replace(/(?:<span>.*?<\/span>)/, "@")
        .replace(/\n|\s|\r/g, "");
    $(this).text(e).attr('href', 'mailto:' + e);
});

$(".contact3").live('mouseover', function() {
    $(this).removeClass('contact3');
    var e = $(this).html()
        .replace(/<\/span>/g, ".")
        .replace(/<span>/, '')
        .replace(/<span>/, '@')
        .replace(/\n|\s|\t|\r/g, "");
    $(this).text(e).attr('href', 'mailto:' + e);
});