content是伪元素的渲染开关，必须显式声明（如content: ""）才能生成盒模型；未声明或值为none时，伪元素不进入渲染流程，即使设置其他样式也无效。
直接用 ::before 或 ::after 配合 content 就能加装饰内容，但必须设 content，哪怕只是空字符串；否则伪元素根本不会渲染。
为什么 content 为空也要写？
伪元素默认不显示，content 是唯一触发渲染的开关。即使你只想画个圆点、加个边框或做遮罩，也得写 content: ""。
-
content: ""—— 创建空白伪元素，方便后续用width/height/background做图形 -
content: "•"—— 插入符号，适合分隔符、列表标记 -
content: url(./icon.svg)—— 内嵌小图标，注意路径和跨域限制 - 千万别漏掉
content，否则审查元素里都看不到这个伪元素节点
定位装饰内容时常见错位问题
伪元素默认是 display: inline，且继承父元素字体大小和行高，容易和文字挤在一起或上下偏移。
- 加
position: absolute后，必须给父容器设position: relative，否则会相对 body 定位 - 用
top/right等偏移时，优先配合transform: translate()微调，避免因字体基线导致像素级偏差 - 如果装饰物要居中（比如按钮右上角徽章），别只靠
right: 0; top: 0，加上transform: translate(50%, -50%)更稳
attr() 和 counter() 动态生成装饰内容
硬编码文字不够灵活，attr() 和 counter() 能让装饰内容随 HTML 或结构变化自动更新。
-
content: attr(data-tip)—— 从元素的data-tip="保存成功"属性取值，适合提示类装饰 -
content: counters(section, ".")—— 配合counter-reset和counter-increment实现多级编号，比如「1.2.3」 -
attr()只读取属性字符串，不解析 HTML；想插标签得用 JS，CSS 伪元素做不到 -
counter()必须在祖先元素上先用counter-reset初始化，否则返回空字符串
真正难的不是写出来，而是控制伪元素的层叠顺序、响应式缩放和可访问性——比如屏幕阅读器默认忽略 content 生成的内容，需要额外加 aria-label 或 aria-hidden 来补全语义。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
