CSS 仅使用CSS保护电子邮件地址

在本文中，我们将介绍如何使用CSS保护电子邮件地址，以防止其被自动化程序或机器人收集和滥用。通过一些简单的CSS技巧，我们可以隐藏电子邮件地址，并在需求时使用JavaScript有效地呈现出来。

阅读更多：CSS 教程

隐藏电子邮件地址

为了保护电子邮件地址，我们需要隐藏它们使其不可见。我们可以通过多种方式来实现这一点。

1. 字符编码

一种简单的方法是使用URL编码或实体编码字符来替换电子邮件地址中的字符。例如，我们可以用URL编码字符替换“@”符号（ASCII值为64），用实体编码字符替换“.”符号（ASCII值为46）。这样，即使电子邮件地址出现在HTML源代码中，机器人也无法直接读取和识别它们。

CSS代码示例：

.email::after {
  content: '404040404040404040404040%s4046#A#A#627%6E50%2A#646#E';
}

2. 伪类选择器和属性

另一种方法是使用CSS伪类选择器和属性来隐藏电子邮件地址。我们可以使用::before或::after伪类选择器，并设置content属性为电子邮件地址。然后，我们可以将文本颜色设置为与背景颜色相同，使其看起来像是隐藏的。

CSS代码示例：

.email::after {
  content: '[email protected]';
  color: transparent;
}

3. 字体大小和位置

我们还可以使用CSS的字体大小和位置属性来隐藏电子邮件地址。通过设置字体大小为0，我们可以使文本看起来消失。然后，我们可以使用text-indent属性将文本缩进到屏幕外，使其无法被看见。

CSS代码示例：

.email {
  font-size: 0;
  text-indent: -9999px;
}

有效呈现电子邮件地址

虽然我们通过上述方法成功地隐藏了电子邮件地址，但用户仍然需要看到和点击电子邮件地址。为此，我们可以使用JavaScript来还原电子邮件地址。

HTML代码示例：

<p>请电邮至<span class="email-link">@contact.com</span>获取更多信息。</p>

JavaScript代码示例：

var emailLink = document.querySelector('.email-link');
emailLink.textContent = '[email protected]';
emailLink.href = 'mailto:[email protected]';

当用户浏览网页时，JavaScript将通过更改textContent属性来插入正确的电子邮件地址，使其可见。用户可以点击电子邮件地址，以便直接使用默认邮件客户端发送电子邮件。

总结

在本文中，我们介绍了如何使用CSS来保护电子邮件地址。通过使用字符编码、伪类选择器和属性、以及字体大小和位置，我们可以有效地隐藏电子邮件地址，使其不易被机器人收集。然后，通过使用JavaScript，我们可以有效地呈现电子邮件地址，为用户提供便捷的联系方式。希望这些技巧对保护电子邮件地址的安全性有所帮助。