::before 和 ::after 必须设置 content 才能生效，因其是渲染层虚拟盒子；默认 display: inline，常需手动设 block/flex/inline-block；不可用 js 获取，不被屏幕阅读器识别，适用于纯视觉装饰而非交互或语义内容。
因为它们能插入装饰性内容而不污染 DOM，且不依赖 JavaScript 就能完成视觉增强 —— 但前提是必须理解它们的限制和触发条件。
为什么 ::before 和 ::after 必须配 content 才生效
这两个伪元素本质是“渲染层虚拟盒子”，浏览器只在 content 有值时才创建对应渲染节点。空字符串 content: "" 可以触发，但完全省略或设为 none 就不会渲染。
-
content是唯一开关：没有它，::before和::after在计算样式、布局、绘制阶段全被跳过 - 常见错误是只写样式不写
content，结果页面毫无反应，开发者反复检查选择器却找不到问题 -
content: attr(data-label)这类动态取值也依赖属性真实存在，若data-label为空或缺失，伪元素仍不显示
为什么伪元素默认不占布局空间，却常需手动设 display
它们初始是 display: inline，但多数场景要当块级容器用（比如覆盖图片、撑开尺寸），不显式声明就会失效。
- 想让
::before填满父容器？得加display: block或display: flex，否则宽高设置无效 - 用伪元素做图标时，
display: inline-block更常用，避免换行或对齐错位 - 绝对定位的伪元素（如覆盖图层）也常漏掉
display，导致width/height不起作用，实际是 inline 元素的宽高约束逻辑在作祟
为什么伪元素不能用 JS 获取，却能在 CSS 中被精准控制
它们不在 DOM 树中，document.querySelector("div::before") 会返回 null，但 CSS 层叠规则对它们完全有效。
- 伪元素继承父元素部分样式（如
color、font-family），但margin、width等必须显式声明 - 可以叠加伪类，比如
.btn:hover::before实现悬停动画，但无法用addEventListener监听伪元素事件 - 屏幕阅读器通常忽略伪元素内容，所以别把关键文本塞进
content—— 这点容易被忽略，尤其做无障碍适配时
真正难的不是怎么写，而是判断该不该用：当需要纯视觉装饰、动态插入符号、覆盖占位图，或替代无语义的空标签时，::before 和 ::after 是利器；一旦涉及交互响应、数据绑定或可访问性主内容，就得退回到真实 HTML 元素。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
