伪元素在 safari 中不渲染，主因是 content 值未正确生效或宿主元素不支持；需确保 content 非空、宿主为非替换元素且设 position:relative，避免 overflow:hidden 和 z-index 失效。

伪元素不渲染？先盯死content有没有写对

伪元素在 Safari 里“消失”，八成是content没生效——不是样式问题，是根本没生成盒子。Safari（尤其 ≤15.4）对content值更敏感，稍有偏差就跳过渲染。

• content: ""合法但脆弱；稳妥写法是content: " "（一个空格），避免因空字符串被某些 WebKit 版本忽略
• 用 Unicode 字符（如箭头→）必须转义：content: "\2192"，直接写content: "→"在旧 Safari 可能乱码或不显示
• content: attr(data-tip)要确认对应元素真有data-tip属性，且值非undefined或空字符串（""可以）
• 别在display: none的父元素上挂伪元素——它连同宿主一起被剔出渲染树

::after定位跑出视口？检查父容器是否“算数”

Safari 对定位上下文更严格。给tr、dialog、img这类元素直接加::after，常因它们不构成可靠定位容器而失效。

• tr上设position: relative再用::after绝对定位，Safari 很可能把伪元素甩到 table 外——改用td作为定位锚点，td行为稳定
• img、input等替换元素（replaced element）天生不支持伪元素，必须外包一层div，伪元素挂载在外层
• 确保宿主元素显式设了position: relative（或其他非static值），否则position: absolute的伪元素会相对视口定位，极易偏移
• Flex/Grid 容器里慎用position: absolute偏移——主轴对齐（如justify-content）可能干扰计算，优先用margin-left: auto或inset

样式写了却看不见？重点排查display、overflow和层叠

伪元素存在但不可见，通常卡在盒模型或层叠逻辑上。Safari 不会报错，只默默不画。

Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries

规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...

下载

• 伪元素默认是display: inline，设了width/height却没改display，尺寸无效——加display: block或display: inline-block
• 父容器overflow: hidden会裁掉超出部分，尤其当伪元素用top: -2px外扩边框时，立刻被切掉
• z-index在 transform 或 filter 创建的新层叠上下文中失效，若父容器有transform: scale(1)，伪元素的z-index可能被忽略
• 用background: yellow临时测试，确认是内容不显示，还是颜色/透明度问题（比如::placeholder必须显式设opacity: 1）

特殊场景：Safari 对outline-offset、:placeholder-shown等伪类/伪元素的硬性限制

有些伪类在 Safari 是“规范未实现”，不是写法问题，强行 hack 反而引入新坑。

• outline-offset在 Safari 中读取但不应用（MDN 标为“部分支持”），必须用::before模拟边框，并加pointer-events: none防拦截点击
• :placeholder-shown在 Safari ≤15.3 中状态更新延迟或完全不触发，不能靠前缀修复，得用 JS 监听input、focus、blur，靠value.trim() === ""判断
• dialog::backdrop上backdrop-filter直接被忽略（规范限制），必须手动建层：div#backdrop-blur覆盖视口，设backdrop-filter并控制display

WebKit 的限制不是 bug，是引擎对渲染流水线的取舍。与其反复调样式，不如先确认当前场景是否踩中已知的引擎边界——这些地方，CSS 写得再标准也没用。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！