17370845950

伪元素 ::before 和 ::after 必须显式设置 content 才能渲染，content: "" 或 " " 可触发显示，但需注意样式、DOM 存在性、编码及选择器正确性。

伪元素 content 属性为空或缺失

伪元素 ::before 和 ::after 必须显式设置 content 才能渲染，哪怕只是空格或引号。浏览器默认不显示未设 content 的伪元素，这不是 bug，是规范行为。

• content: "" 可以触发渲染（但内容为空，可能看不见）
• content: " "（一个空格）比 "" 更可靠，尤其在需要占位或配合 display: inline-block 时
• content: none 或 content: normal 是无效值，会被忽略，等同于没写
• 若用 content: attr(data-tip)，请确认对应元素确实有该属性且值非空

伪元素被其他 CSS 隐藏或覆盖

即使 content 正确，也可能因样式问题“不可见”：透明、颜色与背景一致、尺寸为 0、被父级裁剪等。

• color 或 background-color 与父容器相同 → 检查计算后的颜色值（DevTools 中看 Computed）
• 未设置 display，且伪元素内无内容或内容为空 → display: block 或 inline-block 常需手动指定
• 父元素设置了 overflow: hidden，而伪元素通过 position: absolute 移出范围 → 调整 z-index 或父级 overflow
• 使用了 visibility: hidden 或 opacity: 0 → 查看是否被继承或误设

伪元素选择器语法或作用对象错误

常见误写导致规则根本未生效，浏览器根本不解析该伪元素样式。

• 写了 :before（单冒号）但文档是 HTML5 + CSS3 → 推荐统一用双冒

  

  号 ::before（虽然单冒号仍兼容，但易混淆）
• 选择器指向的元素不存在或未渲染（例如 Vue/React 中条件渲染未触发）→ 先确认 DOM 中目标元素真实存在
• 伪元素加在 、 等替换元素上 → 大部分浏览器不支持（ 的 ::after 在 Chrome/Firefox 中无效）
• CSS 文件未加载或被更高优先级规则覆盖 → 检查 DevTools 的 Styles 面板，看该规则是否被划掉

content 中特殊字符未转义或编码错误

当 content 包含图标、引号、反斜杠或 Unicode 字符时，未正确转义会导致解析失败或显示异常。

• 想显示双引号：content: "\"quoted\""（内部双引号必须用反斜杠转义）
• 插入 Font Awesome 图标：content: "\f007"（注意 Unicode 前缀 \，不是 \\f007）
• 使用 UTF-8 字符如 ✅：content: "✅" 可行，但确保 CSS 文件保存为 UTF-8 编码，且无 BOM
• 换行或制表符需用转义：content: "line1\a line2"（\a 表示换行，但仅在 white-space: pre 下可见）

/* 示例：一个可靠显示的 ::after */
.icon::after {
  content: "▶";
  display: inline-block;
  margin-left: 4px;
  color: #666;
}

伪元素看似简单，但 content 是唯一“开关”，它不对、不显；它对了，还得过样式、DOM、编码三关。最容易被跳过的，是检查目标元素是否真的存在于当前 DOM 树中——尤其是动态框架里，节点还没挂载就写好了伪元素样式。