伪元素 ::before 和 ::after 必须显式设置非 none 的 content 值才能渲染，常见错误包括漏写 content、误用 content: ""（实际生成空盒）、未加引号、display:none 隐藏、z-index 被遮挡、替换元素不支持及 attr() 属性名错误。
content 属性没写或值为空
伪元素 ::before 和 ::after 默认不渲染，必须显式设置 content 才能显示内容。常见错误是只写了样式却漏掉 content，或者写成 content: "" 但忘了加引号（CSS 中空字符串必须带引号）。
-
content值为none或未声明 → 元素完全不生成 -
content: ""是合法的，会生成空盒子（可设宽高/背景） -
content: " "（空格）也能触发渲染，但要注意前后空白可能被折叠 - 若想显示 HTML 实体（如
→），要用content: "\2192"（十六进制 Unicode）
display 或 visibility 隐藏了伪元素
即使 content 正确，伪元素也可能被视觉隐藏。CSS 中 display: none 会彻底移除伪元素，而 visibility: hidden 或 opacity: 0 只是不可见但占位——容易误判为“没显示”。
- 检查是否意外继承了父级的
display: none -
position: absolute且left/top超出视口，也会“消失” - 用浏览器开发者工具的“伪元素”面板（Chrome DevTools 的 Styles 标签页右上角三个点 → “Show user agent shadow DOM” 不需要，但确保勾选 “Show pseudo-elements”）直接查看是否生成
z-index 或层级被其他元素遮挡
伪元素默认 z-index: auto，渲染顺序依赖其所在元素的层叠上下文。如果父元素没有定位（position: relative/absolute/fixed），伪元素可能被兄弟元素盖住。
- 给伪元素加
position: relative并设置z-index（需父元素已建立层叠上下文） - 更稳妥的做法：父元素设
position: relative，伪元素用position: absolute精确控制位置和层级 - 避免在
input、img等替换元素上使用::before/::after—— 它们不支持伪元素
content 引用 attr() 但属性不存在或拼写错误
用 content: attr(data-label) 动态插入属性值时，若 HTML 中没写对应属性，或大小写/连字符不一致（如写成 dataLabel），结果就是空字符串，看起来像没显示。
- HTML 属性名必须全小写+中划线，如
data-tooltip，对应 CSS 中attr(data-tooltip) -
attr()只读字符串，不解析 HTML，也不支持嵌套（不能attr(class)后再转成样式） - 调试技巧：临时改成
content: "DEBUG: " attr(data-label)，确认是否取到值
content 是否有效、是否可见、是否被遮挡、是否取到了预期值这四点。最容易忽略的是：明明写了 content: "" 却以为“不需要内容”，其实它只是空，不是“不生效”。 
