E-Mail Adresse mit CSS schützen

Auf Webseiten wird oftmals eine E-Mail Adresse angegeben, um dem Besucher einen schnellen Kontakt zu ermöglichen. Viele Webdesigner notieren diese Adresse in Reintext auf der Webseite z.B.hans@meinehomepage.de

Im Web sind s.g. Crawler unterwegs um E-Mail Adressen zu erkennen und zu sammeln. Diese so gesammelten Adressen werden in Datenbanken abgelegt und werden von Spammern oder Spamprogrammen genutzt. Eine auf diese Art kompromitierte E-Mail Adresse wird fortan mit Spam-Mail zugemüllt. Es gibt keine Möglichkeit diesen Vorgang rückgängig zu machen. Die Adresse ist für immer 'verbrannt'.

Daher sollten Sie Ihre E-Mail Adresse, wenn Sie keine andere Möglichkeit habe (z.B. Kontaktformular), bestmöglich schützen. Es existieren Lösungen, die auf Javascript basieren. Aber auch CSS bietet eine einfache und elegante Lösung!

Mit dem CSS-Pseudoelement :after kann Inhalt generiert werden. Dieser ist im Quelltext unsichtbar und wird vom Browser während des Seitenaufbaus eingefügt. Notieren Sie, am besten in Ihrer Stilvorlage, folgende Formatanweisung:

#mail:after{content:"hans\40meinehomepage.de"}

Die Zeichenkombination \40 erzeugt das @-Zeichen. Nun können Sie Ihre Adresse z.B. in ein span-Element packen.

<span id="mail">E-Mail: </span>

Und so sieht es aufgelöst aus: E-Mail:

Untersuchen Sie das Element. Sie werden ausser E-Mail: nichts im Quelltext finden und sind ab sofort gegen Spammails geschützt!

Übersicht