如何使::before生成的链接图标可点击且支持卡片全域跳转？

完全可以实现你的需求，所谓的“bug”早已在主流浏览器中修复，你之前遇到的URL文本显示问题是attr(href)的正常CSS行为，并非浏览器bug。

核心实现思路 #

你需要避免用content: attr(href)来生成图标（这本来就会直接输出链接文本），改用图标字体或背景图实现图标，同时确保卡片区域和伪元素都绑定跳转逻辑。

方案1：用<a>标签包裹整个卡片（推荐）

这是最简洁的纯CSS实现方式，利用<a>标签的天然跳转特性，让卡片全域和伪元素都成为可点击区域：

<a href="https://your-target-url.com" class="card-link">
  <div class="card-content">
    <!-- 卡片内的标题、描述等内容 -->
    <h3>卡片标题</h3>
    <p>卡片描述文本</p>
  </div>
</a>

.card-link {
  display: block;
  width: 300px;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 8px;
  position: relative;
  text-decoration: none;
  color: #333;
  cursor: pointer;
}

/* 用伪元素生成图标 */
.card-link::before {
  content: "\f08e"; /* 这里用Font Awesome的图标字符，也可以用background-image */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 18px;
  color: #666;
}

• 整个<a>标签作为卡片容器，点击任意区域都会触发跳转
• 伪元素属于<a>的一部分，自然继承可点击属性，无需额外设置
• 用图标字体或背景图替代attr(href)，完全不会显示URL文本

方案2：JS监听卡片点击（适合无法用<a>包裹的场景）

如果卡片内部有其他独立交互元素（比如按钮），可以用JS实现全域跳转：

<div class="card" data-href="https://your-target-url.com">
  <div class="card-content">
    <h3>卡片标题</h3>
    <p>卡片描述文本</p>
    <button class="card-btn">独立按钮</button>
  </div>
</div>

.card {
  width: 300px;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 8px;
  position: relative;
  cursor: pointer;
}

.card::before {
  content: "";
  position: absolute;
  top: 15px;
  right: 15px;
  width: 18px;
  height: 18px;
  background: url(your-icon-path.svg) no-repeat center;
  background-size: contain;
}

/* 排除内部独立交互元素的跳转触发 */
.card-btn {
  pointer-events: auto;
}

document.querySelectorAll('.card').forEach(card => {
  card.addEventListener('click', (e) => {
    // 如果点击的是内部独立元素，不触发跳转
    if (e.target.classList.contains('card-btn')) return;
    const targetUrl = card.getAttribute('data-href');
    if (targetUrl) window.location.href = targetUrl;
  });
});

关于所谓的“bug”说明 #

早期部分旧版浏览器（如IE10及以下）对伪元素的交互支持不完善，或者对attr()的使用有局限，但目前Chrome、Firefox、Edge等主流浏览器都已完全支持伪元素的点击交互，不存在无法解决的兼容性问题。你之前用content: attr(href)显示URL文本，是因为attr(href)的作用就是读取元素的href属性值并作为内容输出，这是正常的CSS行为，不是bug。

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