伪元素::before和::after必须设置content属性才能渲染，否则不显示；content值不能为normal，需为""、字符串或attr()等有效值；宿主元素不能是替换元素或display:none；还需检查样式覆盖、visibility、z-index及overflow影响。
伪元素（::before 和 ::after）本身不生成实际 DOM 节点，必须通过 content 属性指定内容，否则不会渲染。如果文本没显示，大概率是 content 没设置、值为空、或被其他样式覆盖。
必须显式设置 content 属性
::before 和 ::after 是“空”的，即使写了样式也不会自动出现。必须用 content 声明内容，哪怕只是空格：
-
content: "";—— 显示一个空伪元素（可用来做装饰块、三角等） -
content: "提示文字";—— 显示纯文本 -
content: attr(data-tip);—— 显示元素的data-tip属性值 -
content: "★" " " attr(title);—— 多个值拼接（注意空格需用引号包裹）
检查 content 值是否被覆盖或重置
某些 CSS 重置库（如 normalize.css）或框架可能将 content 设为 none 或空字符串。也可能是父级选择器误写了 content: none;。可用浏览器开发者工具检查该伪元素的 content 计算值是否为 normal 或有效字符串。
特别注意：content: normal; 在伪元素中**无效**，会被忽略；只有 content: ""; 或带引号/函数的值才生效。
立即学习“前端免费学习笔记（深入）”；
确保宿主元素不是 replaced element 或 display: none
伪元素只能附加在**普通流内、可包含内容的元素**上。以下情况无法使用 ::before/::after：
-
<img alt="css伪元素文本内容无法显示怎么办_为::before ::after设置content属性" >、<input>、<textarea></textarea>等替换元素（replaced elements）——它们没有内容区，伪元素不生效 - 宿主元素设置了
display: none;—— 整个元素（含伪元素）被移出渲染树 - 宿主元素是
display: contents;且无其他可渲染子节点时，也可能导致伪元素失效（取决于浏览器支持）
验证是否被 visibility 或 z-index 遮挡
伪元素默认是 inline 级别，可能因行高、字体大小为 0、颜色透明、或被其他层遮盖而“看不见”：
- 加上
color: #000;、font-size: 14px;、line-height: 1.5;确保基础可读性 - 用
background: yellow;临时测试是否渲染了但内容不可见 - 检查是否有
z-index层叠问题，或父容器overflow: hidden;裁剪了位置偏移的内容 - 若用了
position: absolute;，确认top/left值没让它跑出视口
