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
Email

E-mail antispam CSS

HTML

Remplacer le signe @ avec une SPAN nommée arobase

html 
<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
css 
.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éléphone

Téléphone antispam CSS

HTML

Exemple avec les numéros français avec préfixe à 2 chiffres. Remplacer les premiers chiffres par un SPAN avec une class zero-un, zero-six...

html 
<span class="zero-un">[ANTISPAM]</span> 02 03 04 05
Résultat sans CSS
[ANTISPAM] 02 03 04 05
CSS
css 
span[class^="zero-"] {
    font-size: 1px;
    font-size: 0.01rem;
}
span[class^="zero-"]::before {
    font-size: initial;
}
.zero-un::before   { content: "01"; }
.zero-deux::before { content: "02"; }
.zero-six::before  { content: "06"; }
.zero-sept::before { content: "07"; }
.zero-huit::before { content: "08"; }
.zero-neuf::before { content: "09"; }
Résultat avec CSS

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

[ANTISPAM] 02 03 04 05