Protect e-mail address with CSS only

html css spam-prevention email-address

user3087089 · Jan 29, 2014 · Viewed 26.3k times · Source

I want to protect my e-mail address on webpages.

But I don't know JavaScript and PHP. I know only HTML and CSS.

So, please help me how to protect my email address with CSS only.

Answer

It's very simple. You can protect your email address with only HTML & CSS. You don't need to know about PHP or Java script. Try below code.

Simple HTML and CSS code:

<!doctype html>
<html>
<head>
    <title>Protect e-mail with only css</title>
    <style type="text/css">
        .e-mail:before {
            content: attr(data-website) "\0040" attr(data-user);
            unicode-bidi: bidi-override;
            direction: rtl;
        }
    </style>
</head>
<body>

<span class="e-mail" data-user="nohj" data-website="moc.liamg"></span>

</body>
</html>

Output of above code:

[email protected]

Please note:

Here I'm just used two extra attributes.

1) data-user write your e-mail id user name in reverse.

2) data-website write your e-mail id website in reverse.

Protect e-mail address with CSS only

Answer

Related questions