伪元素::before和::after不能响应点击事件，仅适合装饰；“一键复制”需真实button承载，content错误会导致伪元素静默消失，定位需宿主设position:relative，且须保障可访问性。
::before 和 ::after 本身不能直接响应点击事件，所以“一键复制”功能必须由真实 DOM 元素（比如 button）承载；伪元素只适合做那个「优雅的图标占位」——但这个占位一旦写错，图标就彻底消失，连调试都找不到节点。
content 属性缺失或语法错误，图标直接不渲染
浏览器对 ::before 的 content 值极其敏感：值为 none、空字符串没加引号（如 content: "" 写成 content: ）、Unicode 转义漏反斜杠（\2705 写成 u2705），整个伪元素都会被静默丢弃——Elements 面板里压根看不到它。
- 正确写法：
content: "\2705"（✅ Unicode 勾号）、content: "?"（✅ 表情符号）、content: ""（✅ 空内容，配合background-image） - 错误写法：
content: u2705、content: \2705（缺引号）、content: none（显式禁用） - SVG 图标慎用
url()：路径以 CSS 文件位置为基准；若 SVG 含或外部href，多数浏览器会静默失败
图标定位不准？宿主元素没设 position: relative
想把复制图标固定在代码块右上角，必须让 ::before 绝对定位。但 position: absolute 是相对于最近的「已定位祖先」计算的——如果宿主（如 pre 或 div.code-block）没设 position: relative，图标就会飞到 body 顶层左上角。
- 宿主元素必须加：
position: relative - 伪元素设：
position: absolute; top: 8px; right: 8px; - 别依赖
vertical-align：它只对 inline/inline-block 有效，且行为随行高浮动；绝对定位才是稳定解 - 记得预留空间：右上角图标若遮挡代码内容，需给宿主加
padding-right或用transform: translateX(100%)微调
用 background-image + content: "" 比 url() 更可控
直接 content: url("copy.svg") 插入 SVG，伪元素默认是 inline，没有固有尺寸，容易塌陷为 0×0；而 background-image 方案可自由缩放、定位、着色，且兼容性更好。
- 推荐写法：
content: "";+background-image: url("data:image/svg+xml,%3Csvg...%3E"); - 必须配：
display: inline-block; width: 20px; height: 20px; - 支持动态填色：把 SVG 中的
fill="%23666"URL encode 后嵌入 data URI，换主题时只需改 CSS 变量 - 避免字体图标混用：如果同时用了 Font Awesome，
content: "\f0ea"必须配font-family: "Font Awesome 6 Free"; font-weight: 900;，否则显示方块
伪元素图标不可访问，功能性操作不能只靠它
::before 插入的内容不在 DOM 中，屏幕阅读器读不到，document.querySelector(".copy-icon") 也查不到，更无法绑定 click 事件。所谓“一键复制”，实际按钮必须是真实 button 元素，伪元素只是它的视觉皮肤。
- 结构上保留真实按钮：
- 用伪元素覆盖按钮默认样式：
.copy-btn::before { content: "\2705"; ... }，再设.copy-btn { background: none; border: none; } - 关键语义不能省：
aria-label或aria-hidden="true"必须手动加，否则无障碍体验断裂 - 别为了“少写一个标签”牺牲可访问性——伪元素只干装饰活，不扛功能责任
最易被忽略的是：伪元素的 content 值一旦出错，整个节点就从渲染树里蒸发，连 DevTools 的 :hover 检查都失效。调试时第一反应不该是“为什么样式没生效”，而是先打开 Elements 面板，确认那个 ::before 节点是否存在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
