Mac Safari中无锚标签的::before伪元素cursor:pointer失效问题

云上老周

2026-5-22

解决Safari中伪元素cursor:pointer失效的问题

我之前也踩过Safari这个伪元素光标失效的坑，结合你的代码，咱们来快速搞定它！

首先先把你的代码补全（看起来你最后没写完的disp应该是display: block，另外我加了浅灰色背景方便直观看到可交互区域）：

div.check{ 
  width:300px; 
  height:300px; 
  background: grey; 
  position: relative; 
} 
div.check::before{ 
  content: ''; 
  cursor: pointer; 
  position: absolute; 
  left: 0; 
  right: 0; 
  width: 100px; 
  height: 100px; 
  margin: 0 auto; 
  text-align: center; 
  top: 30%; 
  z-index: 999999999; 
  display: block;
  background: lightgrey;
}

为什么Chrome正常，Safari却失效？

Safari对伪元素的cursor属性有个小特性：当伪元素的content为空字符串，或者没有明确开启指针事件时，它可能不会正确识别cursor: pointer的设置，尤其是绝对定位的伪元素，很容易出现这个问题。

两步搞定解决方案

只需要给伪元素加两个属性，基本就能解决Safari的问题：

添加pointer-events: auto：明确告诉Safari这个伪元素可以接收指针事件，避免父元素的指针事件设置影响到它。
确保display为块级：把伪元素的display设置为block或者inline-block，默认的inline属性有时候会导致Safari无法识别交互区域。

修改后的最终代码：

div.check{ 
  width:300px; 
  height:300px; 
  background: grey; 
  position: relative; 
} 
div.check::before{ 
  content: ''; 
  cursor: pointer; 
  position: absolute; 
  left: 0; 
  right: 0; 
  width: 100px; 
  height: 100px; 
  margin: 0 auto; 
  text-align: center; 
  top: 30%; 
  z-index: 999999999; 
  display: block;
  pointer-events: auto; /* 新增：开启伪元素的指针事件 */
  background: lightgrey;
}