content 是伪元素显示图标的必要条件，缺之则样式失效；需配合 display: inline-block、vertical-align: middle 及 position: relative 等设置确保对齐与定位；伪元素图标无 dom 和无障碍支持，关键场景应改用真实元素。
必须写 content，否则图标根本不会出现——这是 90% 人第一次用就栽的坑。
为什么按钮加了样式却没显示图标？
伪元素 ::before 或 ::after 默认不渲染，content 是唯一触发条件。哪怕只想要一个纯色小圆点，也得写 content: ""。
- 漏掉
content→ 浏览器直接忽略整个伪元素，样式再全也没用 -
content值可以是：""、"→"、"\2714"（注意是反斜杠\，不是\u）、url(./icon.svg)、attr(data-icon) - 字体图标（如 Font Awesome）必须配对：
font-family名称要和@font-face完全一致（大小写、空格、引号都不能错），且font-weight必须匹配（比如 solid 图标常用900）
图标总对不齐？试试这三步
默认 display: inline 下，图标基线会随字体变化偏移，靠 top: 5px 这类硬调数值不可靠。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 给伪元素加
display: inline-block：否则width/height无效，margin在某些浏览器里行为异常 - 加
vertical-align: middle：让图标垂直居中于文字行高，比手动算top值稳定得多 - 宿主按钮本身加
position: relative：这是后续做绝对定位的前提，否则position: absolute会相对于body定位，图标直接飞走
想把图标放在按钮右侧或悬浮角标？
绝对定位可行，但必须控制好父容器和空间预留。
- 在按钮上设
position: relative，再给::before加position: absolute+right: 8px+top: 50%+transform: translateY(-50%) - 右侧图标记得预留空间：
padding-right: 32px或margin-right: 32px，否则文字可能被遮挡 - 角标类装饰（如右上角红点）建议用
top: -4px+right: -4px，并配合width: 16px+height: 16px+border-radius: 50%
伪元素图标本质是纯视觉层，不参与 DOM、无法被 JS 直接选中、屏幕阅读器也读不到——需要交互或无障碍支持时，就得换真实 HTML 元素或 aria-label 配合。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
