如何用纯CSS+HTML实现可点击、可见且混淆的mailto://链接

实现思路 #

把邮箱拆成用户名、@符号、域名三部分，通过CSS拼接出完整邮箱的视觉效果；同时将href里的@用HTML实体编码，避免普通爬虫直接识别完整邮箱；添加aria-label保障屏幕阅读器能正确读取邮箱；通过DOM结构优化确保右键复制能获取完整邮箱文本。

核心代码实现 #

<a class="email-link" 
   href="mailto:user&#64;domain.com" 
   aria-label="发送邮件至 user@domain.com">
  <span class="email-user">user</span>
  <span class="email-at">@</span>
  <span class="email-domain">domain.com</span>
</a>

/* 隐藏DOM中的@符号，避免爬虫直接抓取完整文本 */
.email-link .email-at {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* 用CSS伪元素插入@符号，保证视觉显示正确格式 */
.email-link .email-user::after {
  content: "@";
  margin: 0 0.2em;
}

/* 基础链接样式，优化交互体验 */
.email-link {
  color: #0066cc;
  text-decoration: underline;
  cursor: pointer;
}

.email-link:hover {
  color: #004080;
}

各功能说明 #

• 爬虫混淆：DOM中的@符号被视觉隐藏，普通爬虫抓取文本时只会得到userdomain.com；href里的@用实体@编码，多数基础爬虫无法解码为完整邮箱地址；
• 可点击唤起客户端：浏览器会自动解析mailto:user@domain.com为正确邮箱，点击后正常唤起邮件客户端；
• 屏幕阅读器兼容：aria-label明确标注完整邮箱地址，屏幕阅读器会优先读取该内容，确保无障碍访问；
• 右键复制支持：现代浏览器（Chrome、Firefox等）支持复制CSS生成的@符号，选中链接文本即可复制到完整邮箱；
• 格式正确性：视觉上完全显示标准邮箱格式user@domain.com。

备选兼容方案（针对老旧浏览器复制问题） #

如果部分浏览器无法复制CSS生成的@符号，可调整为以下结构，用混淆文本替代DOM中的@，再通过CSS替换显示：

<a class="email-link" 
   href="mailto:user&#64;domain.com" 
   aria-label="发送邮件至 user@domain.com">
  user<span class="email-at">[at]</span>domain.com
</a>

.email-link .email-at {
  font-size: 0;
}

.email-link .email-at::after {
  content: "@";
  font-size: 1rem;
  margin: 0 0.2em;
}

这种方案下，爬虫抓取到的是user[at]domain.com，视觉显示为正确邮箱，复制时同样能获取完整地址，同时屏幕阅读器通过aria-label读取正确内容。

内容的提问来源于stack exchange，提问作者jamacoe