antispam.css

Technique anti-spam pour les numéros de téléphone et adresses e-mails en CSS

E-mail address antispam and phone number antispam only with CSS

GitHub Gist

E-mail antispam CSS

HTML code

Remplacer le signe @ avec une SPAN nommée "arobase"

<a href="mailto:contact(arobase)monsite.fr">
	contact<span class="arobase"><span>(arobase)</span></span>monsite.fr
</a>

Résultat sans CSS

contact(arobase)monsite.fr

CSS code

.arobase::before {
    content: "\000040";
    font-size: inherit !important;
}
.arobase span {
	font-size: 1px;
    font-size: 0.1px;
    text-indent: -999px;
    width: 1px;
    overflow: hidden;
}

Résultat avec CSS

contact(arobase)monsite.fr

Télephone antispam CSS

Exemple avec les numéros français avec préfixe à 2 chiffres.

HTML code

Remplacer les premiers nombre par un DIV avec une CLASS="zero-un"

<span class="zero-un">[ANTISPAM]</span> 02 03 04 05

Résultat sans CSS

[ANTISPAM] 02 03 04 05

CSS code 

span[class^="zero-"]{
	font-size:1px;
	font-size:0.01rem
}
span[class^="zero-"]::before{
	font-size:initial
}	

.zero-un::before{
	content:"01";
}
.zero-six::before{
	content:"06";
}
.zero-sept::before{
	content:"07";
}
.zero-huit::before{
	content:"08";
}

Résultat avec CSS

Le téléphone reste visuellement lisible, mais est protégé du copier/coller

01-NOSPAM 02 03 04 05