CSS Anti Spam Trick with content attribute

Some time ago I stumbled upon a simple way to add email addresses on web pages — that are not easy to read by bots — using only CSS.

First you add new class .email with your domain into your style sheet:

.email:after {
content:attr(title) "@example.com";

..then use it inside HTML code like this:

<span class="email" title="info"></span>

First part of the email address is written inside a title attribute and the content should be left empty.

Resulting HTML code looks like this:

Update: Look also CSS support for content. (It’s not supported in IE7 and older.)

About jhh

Programmer, business owner and a system admin. I post about books, business, Internet, technology and pretty much anything interesting, too.
This entry was posted in Programming, Web development & design and tagged , , , . Bookmark the permalink.

One Response to CSS Anti Spam Trick with content attribute

  1. Alexey says:

    In most browsers (Chrome, Firefox, IE) you can’t select such text, what makes it harder to read by humans, too :(

Leave a Reply

Your email address will not be published. Required fields are marked *

Anti-Spam Quiz: