伪元素不显示的首要原因是未设置content属性；必须显式声明content（如""、"•"、attr()或url()），否则浏览器跳过渲染，其他样式无效。
伪元素不显示？先确认 content 属性有没有设
伪元素（::before 和 ::after）默认不会渲染，必须显式设置 content 属性——哪怕只是空字符串。没设 content，其他样式（比如 color、background）再全也没用，浏览器直接跳过渲染。
常见错误场景：
- 复制了别人带样式的代码，但漏掉了
content: "" - 想用伪元素做装饰块，只写了
width/height/background，忘了content - 动态生成内容时，
content值被 JS 覆盖或计算为空，但没 fallback
content 的值写法有讲究
不是所有值都合法，也不是所有写法都等效。浏览器对 content 的解析很严格：
-
content: ""—— 最常用，生成空内容，适合纯视觉装饰 -
content: "•"或content: "→"—— 显示字符，注意编码和字体支持 -
content: attr(data-label)—— 读取元素的 HTML 属性，确保属性存在且非空 -
content: url(./icon.svg)—— 插入图片，路径要可访问，且注意同源限制和 CORS -
content: none—— 合法值，但效果是“不生成内容”，伪元素仍存在，但不可见（也无盒模型）
⚠️ 错误写法：content: null、content: undefined、content: auto —— 这些都不是标准值，会被忽略，等价于没设。
立即学习“前端免费学习笔记（深入）”；
检查是否被其他 CSS 抑制了
即使 content 正确设置了，也可能因以下原因“看不见”：
- 父元素设置了
overflow: hidden，而伪元素溢出边界被裁剪 - 伪元素本身
display: none或visibility: hidden - 颜色与背景色相同（例如
color: white在白色背景上） - 没有尺寸（
width/height为 0）且没内容/背景，盒子塌陷 - z-index 太低，被其他层遮挡（尤其在定位上下文中）
建议用浏览器开发者工具：选中元素 → 查看 “Computed” 面板，确认 content 是否解析成功，以及伪元素是否出现在 DOM 树的“::before/::after”节点下。
兼容性与特殊限制
::before 和 ::after 在绝大多数现代浏览器中稳定支持，但仍有细节差异：
- IE8 只支持单冒号语法（
:before/:after），双冒号会失效 -
content中使用attr()读取自定义属性（如data-*）时，Firefox 早期版本对空格/特殊字符处理较严格 - 伪元素不能绑定事件，也不能被 JavaScript 直接获取（
getComputedStyle(el, '::before')可读样式，但无法调用.addEventListener） - 某些 CSS-in-JS 库（如 styled-components）对伪元素的动态
content支持有限，需避免运行时插值出非法值
/* 示例：正确创建一个带边框的装饰点 */
.icon::after {
content: "";
display: inline-block;
width: 6px;
height: 6px;
background: #333;
border-radius: 50%;
margin-left: 4px;
}最常被忽略的一点：伪元素不是“自动有尺寸”的——它默认是 display: inline，且仅包裹 content 内容。如果 content 是空字符串，又没设 width/height/background 等触发盒模型的属性，那它就真的一丁点都不占空间，也看不到。
