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

by stofke

HTML

<a href="#" class="contact">Contact Me</a>

CSS

/** Is needed because we can't get content from pseudo selectors **/
a.contact span {
    content: "your\002e name\0040 email\002e com";
    display: none;
}
/** Opera replaces existing text when using content: while other browsers add stuff to it.  So we need to hide the original content in all other browsers

http://nicolasgallagher.com/another-css-image-replacement-technique/**/
a.contact:hover, a.contact span {
    color: transparent;
    font-size: 0;
    line-height: 0;
    text-shadow: none;
}
/** Add the email address in front **/
a.contact:hover::before {
    color: blue;
    content: "your\002e name\0040 email\002e com";
    font-size: 16px;
}

JavaScript

$(".contact").live("mouseover", function() {

    //to make it work in Opera add a span
    $("<span></span>").appendTo($("a.contact"));

    //get the CSS classname of this
    var a = "." + $(this).attr("class") + " span",

        //get the content of span from the CSS 
        //Strip quotes from the result (bug in webkitbrowsers?)                 
        a = $(a).css("content").replace(/['"]/g, "");

    //set the mailto to the CSS content
    $(this).attr("href", "mailto:" + a)
});