实现链接后加同址图标：链接父窗打开、图标新窗打开是否可行？

嘿，这个想法很实用，但直接用 CSS :after 插入图片的方式没法实现点击图标在新窗口打开的需求，原因很简单：CSS 生成的伪元素只是静态的装饰内容，没办法给它绑定独立的链接地址和 target="_blank" 属性。

为什么你的示例行不通？ #

你写的 CSS 代码（需要修正选择器，应该是 .icon:after 而非 .icon a:after，因为你的链接本身就带 .icon 类）会在链接后面插入一张图片，但这张图片只是链接元素的一部分——点击它会触发父链接的跳转行为，也就是和原链接一样在父窗口打开，没法单独设置新窗口打开的规则。

可行的实现方案 #

这里有两种靠谱的方法来实现你的需求：

1. 直接在 HTML 中添加独立的图标链接

这种方法最直观，不用依赖脚本，直接在原链接后加一个指向相同地址、且设置了 target="_blank" 的图标链接：

<a href="link.com" class="icon">Link</a>
<a href="link.com" target="_blank" class="external-icon">
  <img src="/img/icons/external_link.png" alt="在新窗口打开">
</a>

然后用 CSS 调整样式，让图标和链接看起来是一体的：

.icon {
  /* 原链接的样式 */
  text-decoration: none;
  color: #2c3e50;
}

.external-icon {
  margin-left: 6px; /* 给图标和链接加一点间距 */
  display: inline-block;
  vertical-align: middle;
}

.external-icon img {
  width: 16px;
  height: 16px;
}

2. 用 JavaScript 动态生成图标链接

如果不想手动修改大量 HTML，可以用 JS 批量给所有带 .icon 类的链接添加图标：

// 遍历所有带 .icon 类的链接
document.querySelectorAll('a.icon').forEach(link => {
  // 创建新的图标链接元素
  const iconLink = document.createElement('a');
  iconLink.href = link.href;
  iconLink.target = '_blank';
  iconLink.className = 'external-icon';

  // 创建图标图片元素
  const iconImg = document.createElement('img');
  iconImg.src = '/img/icons/external_link.png';
  iconImg.alt = '在新窗口打开';

  // 组装元素并插入到原链接后面
  iconLink.appendChild(iconImg);
  link.insertAdjacentElement('afterend', iconLink);
});

然后用和上面一样的 CSS 来美化样式即可。

总结 #

纯 CSS 伪元素的方式没法实现“图标单独在新窗口打开”的需求，因为伪元素不是可交互的独立链接节点。通过额外的 HTML 标签或者 JavaScript 动态生成的方式，就能完美实现你想要的效果：原链接在父窗口打开，图标点击在新窗口打开。

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