Before & After伪元素在Safari浏览器中无法生效问题排查求助

以下是可能导致Safari中伪元素不生效的几个常见原因及对应解决方案：

• 父元素未设置定位上下文
  绝对定位的伪元素需要依赖最近的定位父元素（即设置了position: relative/absolute/fixed/sticky的元素）来确定位置。如果.home-about没有设置position: relative，Chrome可能会默认以视口为基准渲染，但Safari的渲染逻辑可能导致伪元素位置异常或完全不显示。
  解决方案：给.home-about添加定位属性：

  .home-about {
    position: relative;
  }
  

• CSS颜色语法兼容性问题
  你在:after伪元素中使用的rgb(255 255 255 / 70%)是CSS Color Level 4的新语法，旧版本Safari（15.4之前的版本）不支持这种空格分隔的rgb函数写法。
  解决方案：换成兼容性更好的rgba()语法：

  .home-about:after {
    background: rgba(255, 255, 255, 0.7);
  }
  

• 空内容伪元素的渲染差异
  部分旧版Safari对content: ""的空内容伪元素渲染存在兼容问题，可尝试给content设置一个不可见的空白字符触发渲染：

  .home-about:before, .home-about:after {
    content: "\00a0";
  }
  

• z-index堆叠上下文冲突
  Safari对z-index的堆叠上下文处理和Chrome略有差异，如果.home-about内部有其他设置了z-index的元素，可能会覆盖伪元素。可以尝试提高伪元素的z-index值，或者确保父元素的堆叠上下文设置正确。

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