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.)

Fork me on GitHub

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.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Anti-Spam Quiz: