a:hover::before 显示图标需设非空 content（如" "或符号），元素应设 position:relative 且伪元素用 absolute 精确定位，兼顾移动端需补充 :focus/:active，避免纯依赖 :hover。
用 ::before 在 :hover 时显示图标，必须设 content 且元素需支持伪元素
直接写 a:hover::before { content: "→"; } 不生效，常见原因是：a 默认是行内元素，没宽高、没 position 上下文，或父容器截断了伪元素溢出。更关键的是：伪元素的 content 值不能为空字符串（""），否则不渲染；也不能只靠 display: inline 撑开——得显式设置尺寸或布局行为。
-
::before必须搭配content（哪怕只是" "空格）才能触发渲染 - 推荐给伪元素加
display: inline-block或block，方便控制宽高、对齐和定位 - 若图标是文字（如箭头、•），注意字体是否支持；若是 Unicode 图标（如
\27A4），确保页面编码为 UTF-8 - 避免在
上直接用::before+:hover，因为:hover作用于时，鼠标移入子链接可能触发意外离开事件——更稳的做法是悬停目标设为
图标位置偏移不自然？用 position: absolute 配合 relative 容器微调
单纯靠 margin-left 推图标容易受字体、行高影响，尤其多行文本时错位明显。稳妥方式是让列表项（或链接）设 position: relative，再把 ::before 设为 position: absolute，用 left/top 精确锚定。
li a {
position: relative;
padding-left: 24px; /* 预留图标空间 */
}
li a:hover::before {
content: "▶";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
font-size: 12px;
}
-
padding-left是防图标压住文字的关键，值要 ≥ 图标宽度 + 间距 -
transform: translateY(-50%)比top: Xpx更可靠，能自动居中垂直方向 - 若用字体图标（如 Font Awesome），把
content换成对应 Unicode，并确保font-family正确加载
用 SVG 或背景图替代 content？注意 ::before 的限制
::before 的 content 只能是字符串、attr() 或 url()（即图片），不支持内联 SVG 标签。想用 SVG 图标，只能走 url("data:image/svg+xml,...") 编码路径，或换用 background-image 方案。
- 纯 CSS 方案中，
url()写法示例：content: url("icon.svg");，但兼容性差（Safari 旧版不支持） - 更通用做法：去掉
content，改用background：li a:hover::before { content: ""; background: url(arrow.svg) no-repeat left center; width: 16px; height: 16px; } - 此时必须设
width/height，否则background不占空间；content: ""仍不可省，否则伪元素不创建
移动端点击无反馈？:hover 在触摸设备上行为不一致
iOS Safari 和部分安卓浏览器中，:hover 只在第一次点击后才激活，且可能残留状态。这不是 bug，是规范行为——触摸设备没有“悬停”概念。所以仅靠 :hover + ::before 做交互提示，在手机上大概率失效或延迟响应。
- 真实场景建议加一层
:focus（键盘导航）和:active（触摸按下）支持：a:hover::before, a:focus::before, a:active::before - 若需全平台统一表现，放弃纯 CSS，改用 JS 切换 class（如
is-hovered），再针对该 class 写样式 - 测试时务必真机验证，模拟器的 hover 行为常有误导性
CSS 里靠 :hover 和 ::before 显示图标看着简单，实际卡点都在细节：伪元素是否被渲染、定位是否脱离文档流、移动端是否降级、图标资源是否可访问。别指望一次写完就全端可用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
