content属性仅支持字符串、attr()、url()、counter()、none五种值，不解析html、不继承样式，所有样式需手动设置；伪元素默认inline，需改display才能控制宽高定位；内容不可访问、无dom节点、无法交互。
能插，但 content 本身不解析 HTML、不加载字体、不继承父元素颜色——所有样式和行为都得手动配。
content 属性只认五种值：字符串、attr()、url()、counter()、none
写 content: "✓" 或 content: "\2713" 没问题；写 content: ✓（不加引号）或 content: auto 就完全失效，浏览器静默忽略。用图标字体如 Font Awesome，必须显式声明 font-family 和 font-weight，否则 Unicode 码点只会按系统默认字体渲染，大概率是方框或空白。
-
content: url(./icon.svg)：路径以 CSS 文件位置为基准，不是 HTML 页面；图标尺寸固定，无法用color改颜色，只能改 SVG 源文件或用background-image替代 -
content: attr(data-icon)：只读宿主元素自身的data-icon属性，且只取字符串值；attr("data-icon")里加引号是错的，会失效 -
content: none是彻底移除节点；content: ""仍生成空文本节点，可能意外撑高行距或触发换行
display 必须设对，否则宽高/定位/背景全白搭
::before 默认是 display: inline，不能设 width、height，vertical-align 行为也不稳定。想当图标用，基本都要改成 inline-block 或 block。
- 做文字前缀图标（如按钮左侧小图标）：用
display: inline-block+vertical-align: middle对齐基线 - 做角标或浮层：先给父元素加
position: relative，再给伪元素设display: block+position: absolute+ 显式top/right - 纯装饰图形（如小圆点、三角形）：
display: inline-block配width/height/background；画三角形则用border技巧，记得清空width和height
图标颜色、大小、可访问性都不靠 content 决定
content 只管“塞什么进去”，颜色得靠 color（对 Unicode/字体图标），大小靠 font-size（字体类）或 width/height + background-size（图片类）。更重要的是：::before 插入的内容不在 DOM 中，屏幕阅读器看不见，document.querySelector 找不到，也不能直接绑定事件。
- 用
content: "✅"？iOS 和 Windows 渲染效果可能完全不同，别依赖系统 emoji 做关键标识 - 用 Font Awesome？确保
@font-face已加载，且font-family名字与图标库文档完全一致（注意空格、版本号、Free/Solid 区分） - 需要语义或交互？别硬扛，改用真实
<span class="icon"></span>标签，再用 ARIA 属性补全，比如aria-hidden="true"配合aria-label
真正容易被忽略的，是 content: "" 的布局副作用和伪元素的无障碍缺失——它看起来最轻量，实则最容易在表单、列表、响应式断点里悄悄破坏对齐或让视障用户丢失关键状态信息。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
