::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 确实不会显示 —— 这是规范行为，不是兼容性问题。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• ✅ 只有在图片加载失败时，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 绑定它的点击事件——它根本不在节点路径里。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！