伪元素不显示最常见原因是未正确设置非空content属性；需显式声明content: ""等合法值，并确保样式可见、宿主元素支持且未被隐藏。
伪元素（::before 和 ::after）不显示，最常见原因是没正确设置 content 属性——它不仅是必需的，而且不能为空字符串以外的“无值”状态。
content 属性必须显式声明且非空
::before 和 ::after 是“生成内容”的伪元素，浏览器默认不会渲染它们，除非你通过 content 明确告诉它“生成什么”。即使只是想用它来布局或加边框，也至少得写 content: ""（空字符串），而不能省略或写成 content: none（无效值）。
- ✅ 正确：
content: "";、content: "✓";、content: attr(data-label); - ❌ 错误：
content: ;（语法错误）、content: none;（不合法）、直接不写content
检查元素是否具备可渲染的样式基础
即使 content 写对了，如果伪元素没有尺寸、颜色或可见性支持，也可能“存在但不可见”。
- 文字类内容需确保
color不为透明或与背景同色 - 若只设
content: ""又没设width/height/background/border，它默认宽高为 0，自然看不见 - 确认未意外设置
display: none、visibility: hidden或opacity: 0
确认宿主元素满足伪元素触发条件
伪元素依附于真实元素，但某些元素类型或状态会限制其生效：
立即学习“前端免费学习笔记（深入）”；
-
等替换元素默认不支持::before/::after（部分浏览器下::after在 - 宿主元素的
display值影响伪元素行为：例如display: contents会让伪元素失去渲染上下文 - 确保宿主元素在 DOM 中存在且未被
display: none隐藏（伪元素不会在父级隐藏时单独出现）
调试建议：快速验证是否生效
在开发中可临时加一段高对比样式快速确认：
.box::after {
content: "TEST";
color: red;
background: yellow;
padding: 2px 6px;
border: 1px solid black;
display: inline-block;
}
如果这时能看到 “TEST”，说明伪元素已正常挂载，问题出在原始样式或内容逻辑上；如果仍不显示，回头逐项排查上述三点。
