如何为CSS伪元素添加跳转链接？使用content: url()不生效如何解决

伪元素添加跳转链接的实现方案 #

伪元素属于CSS生成的内容，不存在于实际DOM树中，无法直接绑定跳转行为，你使用的content: url()写法本身不符合语法规则：该属性值仅支持传入图片资源地址用于插入图片，不能直接填入跳转链接，自然无法实现预期效果。

可行的实现方法

• 方法1：父元素嵌套a标签（最推荐）
  直接将伪元素的挂载父元素设为a标签，伪元素作为a标签的衍生内容会自动继承点击跳转属性，代码示例如下：

  <a href="你的目标跳转地址" class="pseudo-link"></a>
  

  .pseudo-link::after {
    content: "";
    display: block;
    width: 100px;
    height: 100px;
    /* 其他伪元素样式 */
  }
  

• 方法2：JS绑定父元素点击事件
  如果无法修改父元素为a标签，可以给父元素绑定点击事件，通过点击坐标判断是否命中伪元素区域，再执行跳转逻辑，该方案复杂度更高，无特殊需求优先使用第一种方法。

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