伪元素::before和::after必须设置content属性（如content: ""）才能渲染，否则完全不生效；常见失效原因包括content缺失或非法、父元素未设position: relative导致定位错乱、被display:none等隐藏，以及在img等替换元素上误用。
直接用 ::before 和 ::after 替代空标签，前提是必须写 content，否则不渲染。
伪元素不生效的常见原因
写了 ::before 却看不到内容，大概率是这几个地方卡住了：
-
content属性缺失或值为空字符串但没加引号（content: ""才合法，content:不行） - 父元素没有设置
position: relative，而你又用了absolute定位伪元素——它会相对于最近的定位祖先找位置，不是父元素 - 伪元素被其他样式覆盖，比如
display: none、visibility: hidden或opacity: 0混用 - 在
<img alt="怎么在CSS3中利用伪元素避免添加多余的HTML无用标签？" >、<input>等替换元素上误用：它们不支持::before/::after（IE/Edge 旧版尤其明显）
替代空标签的典型场景与写法
比如要加一个删除图标，不用写 <i class="icon-del"></i>：
.del::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
background: url("delete.svg") no-repeat center;
background-size: contain;
margin-right: 4px;
}
再比如给表单项加必填星号，不用额外加 <span class="required">*</span>：
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
.required::after {
content: "*";
color: #f00;
margin-left: 4px;
}
注意：如果原生文本需要“视觉隐藏但语义保留”（如可访问性要求），别用 font-size: 0 或 text-indent: -9999px 这类老方案，优先用 clip-path: inset(50%) 或 position: absolute; clip: rect(1px, 1px, 1px, 1px)。
清除浮动时为什么 ::before 和 ::after 要一起写
只写 .clearfix::after 清浮动，可能遇到顶部外边距合并（margin collapse）问题，导致父容器上边距失效。正确做法是：
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
其中 ::before 防止父元素和第一个子元素的上外边距合并；::after 才真正撑开并清除浮动。现代项目可忽略 IE6–7 的 *zoom: 1，但若维护老系统，别漏掉。
伪元素本质是“视觉层补丁”，它不改变 DOM 结构，也不影响语义和可访问性树——所以千万别把关键提示、操作按钮、错误信息塞进 content 里，屏幕阅读器通常不读它。
