如何用CSS或jQuery为伪元素生成的邮箱文本添加邮件链接？

嘿，这个问题我之前踩过坑！确实，CSS伪元素生成的内容本质上是浏览器渲染出来的“虚拟”内容，不属于DOM树的一部分，所以没法直接给它套<a>标签或者添加mailto:链接——浏览器根本不会把它当成可交互的链接来处理。不过有几个靠谱的变通方案能实现你要的效果，我给你拆解下：

方案1：通过JavaScript给父元素绑定点击事件（推荐，保留伪元素） #

既然伪元素是父元素.SPA-notRight的一部分，点击伪元素区域会触发父元素的点击事件。我们可以通过计算伪元素的位置，判断用户是否点击了邮箱文本区域，再触发邮件客户端：

步骤1：优化CSS，让伪元素看起来像可点击链接 #

.SPA-notRight:after {
  content: 'contact us: me@email.com';
  visibility: visible;
  display: block;
  color: #0066cc; /* 链接蓝色 */
  text-decoration: underline;
  cursor: pointer; /* 鼠标变手型 */
  margin-top: 8px; /* 和上面的p标签拉开距离 */
}

步骤2：用jQuery绑定点击事件并判断点击区域 #

$('.SPA-notRight').on('click', function(e) {
  // 获取伪元素的计算样式
  const pseudoStyle = window.getComputedStyle(this, ':after');
  const pseudoHeight = parseInt(pseudoStyle.height);
  const parentRect = this.getBoundingClientRect();
  
  // 判断点击坐标是否落在伪元素区域内
  if (e.clientY >= parentRect.bottom - pseudoHeight) {
    // 触发邮件客户端
    window.location.href = 'mailto:me@email.com';
  }
});

这个方案完全保留了伪元素生成文本的逻辑，只是通过JS监听父元素的点击来模拟链接行为。

方案2：用绝对定位的<a>标签模拟伪元素效果（无JS，但需新增DOM元素） #

如果不想引入JS，可以在父元素里新增一个<a>标签，通过绝对定位让它和伪元素的位置完全重合，视觉上和伪元素生成的文本一致：

调整后的DOM结构 #

<div class="SPA-notRight">
  <p>Something not right?</p>
  <a href="mailto:me@email.com" class="fake-pseudo-link">contact us: me@email.com</a>
</div>

对应的CSS #

.SPA-notRight {
  position: relative; /* 给绝对定位的子元素做参照 */
}

.SPA-notRight .fake-pseudo-link {
  position: absolute;
  top: 100%; /* 放在p标签的下方，和原伪元素位置一致 */
  left: 0;
  color: #0066cc;
  text-decoration: underline;
  background: transparent; /* 确保不遮挡下方内容 */
}

/* 隐藏原来的伪元素，避免重复显示 */
.SPA-notRight:after {
  content: '';
  visibility: hidden;
}

这个方案不需要JS，但需要新增一个DOM元素，不过视觉效果和原需求完全一致。

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