::before 和 ::after 本质功能相同，仅插入位置不同；必须声明 content 属性（如 content: ""），否则不渲染；img 等替换元素上伪元素默认失效，需包裹容器实现叠加；attr() 取值严格区分大小写和连字符。
::before 和 ::after 本质没有功能区别，只是插入位置不同：一个在元素内容前，一个在内容后。用错位置会导致视觉错乱或完全不可见。
content 属性必须写，且不能为空字符串以外的空值
伪元素不渲染的前提，90% 是因为漏写了 content，或者写了 content: none、content: normal 这类无效值。浏览器只认 content: ""（空字符串）作为合法的“无内容”声明。
-
content: ""✅ 合法，可配合background或border做装饰性图形 -
content: " "✅ 合法（带空格的字符串），但可能引发意外换行或空白占位 -
content: none❌ 不生效，伪元素直接被忽略 -
content完全省略 ❌ 伪元素不渲染，CSS 规则整体失效
img 元素上 ::before/::after 失效？不是 bug，是设计限制
img 是可替换元素（replaced element），其渲染由外部资源（如图片文件）主导。当图片正常加载时，::before 和 ::after 确实不会显示 —— 这是规范行为，不是兼容性问题。
- ✅ 只有在图片加载失败时，
img::before/img::after才会生效（可用于 fallback 提示） - ✅ 若需在图片上叠加图标或遮罩，应把
img包进容器（如<div class="img-wrap"></div>），对容器使用伪元素 - ❌ 不要试图给
img直接加position: relative再用伪元素绝对定位——即使写了，成功概率取决于加载状态
attr() 动态取值时，属性名大小写必须严格匹配 HTML
content: attr(alt) 能工作，不代表 content: attr(ALT) 或 content: attr(data-alt) 也能——HTML 属性名区分大小写，且 attr() 不支持连字符转驼峰。
立即学习“前端免费学习笔记（深入）”；
-
<img alt="猫咪">→content: attr(alt)✅ -
<img data-tip="hover提示">→content: attr(data-tip)✅（注意是data-tip，不是dataTip） -
<p class="title">标题</p>→content: attr(class)✅，但一般没意义；content: attr(CLASS)❌ - 若属性不存在，
attr()返回空字符串，不会报错，但内容为空
真正容易被忽略的是：伪元素生成的内容属于渲染层，不进入 DOM 树，也不被屏幕阅读器识别。别用 ::before 放关键操作文案，也别指望用 JS 绑定它的点击事件——它根本不在节点路径里。
