杂记-css隐藏邮箱地址

Hiding Email Addresses with CSS – A Quick Note

I stumbled upon this interesting way of hiding email addresses and thought I’d jot it down.

Contact me at:

As you can see, this email address can’t be selected or copied. At first, I suspected it was using JavaScript to make it non-copyable. But after disabling JS, it still couldn’t be copied, so I checked the source code and found this:

<span class="e-mars" data-left="eman" data-right="moc.sserdda"></span>

.e-mars::before {
    content: attr(data-right) "\0040" attr(data-left);
    unicode-bidi: bidi-override;
    direction: rtl;
    color: #3284a2;
}

The code achieves two things:

1. Non-selectable: The ::before pseudo-element in the CSS makes the email non-selectable and non-copyable.
2. Reversed Order: The email address is split and stored in reverse, so it can’t be directly copied from the source code.

Final Thoughts

I get that with so many crawlers out there on the internet, posting an email in plaintext/hypertext can lead to tons of spam. But this was the first time I’d seen obfuscation (reversed email) layered on top of CSS’s non-copyable functionality just to avoid spam. Hard to say if it’s clever or just frustrating—after all, I was the one trying to email this person! After spending 20 minutes trying to copy it, I gave up and just typed it out instead. What can I say, man! 😂