伪元素 ::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 中目标元素真实存在
- 伪元素加在
<img alt="css 伪元素不显示内容怎么办_检查 content 是否正确设置" >、<input>等替换元素上 → 大部分浏览器不支持（<img alt="css 伪元素不显示内容怎么办_检查 content 是否正确设置" >的::after在 Chrome/Firefox 中无效） - CSS 文件未加载或被更高优先级规则覆盖 → 检查 DevTools 的 Styles 面板，看该规则是否被划掉
content 中特殊字符未转义或编码错误
当 content 包含图标、引号、反斜杠或 Unicode 字符时，未正确转义会导致解析失败或显示异常。
立即学习“前端免费学习笔记（深入）”；
- 想显示双引号：
content: ""quoted""（内部双引号必须用反斜杠转义） - 插入 Font Awesome 图标：
content: " 007"（注意 Unicode 前缀，不是\f007） - 使用 UTF-8 字符如 ✅：
content: "✅"可行，但确保 CSS 文件保存为 UTF-8 编码，且无 BOM - 换行或制表符需用转义：
content: "line1 line2"（表示换行，但仅在white-space: pre下可见）
/* 示例：一个可靠显示的 ::after */
.icon::after {
content: "▶";
display: inline-block;
margin-left: 4px;
color: #666;
}伪元素看似简单，但 content 是唯一“开关”，它不对、不显；它对了，还得过样式、DOM、编码三关。最容易被跳过的，是检查目标元素是否真的存在于当前 DOM 树中——尤其是动态框架里，节点还没挂载就写好了伪元素样式。
