删除图标用::after需配合:hover控制显隐，初始设visibility:hidden避免抖动，悬停时visible+opacity:1+transition；注意父容器定位、pointer-events及overflow影响；伪元素不可交互，点击逻辑须绑定父元素或用透明元素覆盖。
删除图标用 ::after 伪元素显示，但鼠标没移上去就露出来了
这是因为 ::after 默认一直存在，没控制显隐逻辑。必须配合 :hover 把它“藏起来”，再在悬停时“拉出来”。关键不是加不加 ::after，而是怎么让它只在需要时出现。
- 初始状态用
content: ""+opacity: 0或visibility: hidden（推荐后者，避免占位抖动） - 悬停时设
visibility: visible+opacity: 1，再加transition让淡入更自然 - 别只靠
display: none切换——它会触发重排，导致布局跳动；visibility更稳妥
:hover 失效？检查父容器是否遮挡或指针事件被禁用
常见现象是鼠标移过去图标不动，连 hover 样式都不触发。大概率不是 CSS 写错了，而是元素被盖住了，或者父级加了 pointer-events: none。
- 用浏览器开发者工具「检查元素」，看悬停时高亮区域是否真落在目标元素上
- 确认父容器没有
overflow: hidden裁掉伪元素（::after的定位超出父盒会被剪掉） - 如果图标是绝对定位，记得给父容器加
position: relative，否则::after会相对 body 定位 - 某些 UI 框架（如 Ant Design）的
Tooltip或Popover会默认加pointer-events: none到子内容，需手动覆盖
图标用字体图标还是 SVG？影响加载和点击热区
用 ::after 插图标时，content 值决定渲染方式：字体图标靠 Unicode 字符，SVG 得转义后塞进去，两者行为差异挺大。
- 字体图标（如
content: "\e901"）依赖字体文件加载，首屏可能闪一下空白；建议配@font-face预加载或 fallback - 内联 SVG（如
content: url("data:image/svg+xml,...")）无网络依赖，但 base64 过长会让 CSS 可读性变差，且无法用 CSS 改颜色（除非用fill: currentColor） - 无论哪种，都要加
pointer-events: auto——伪元素默认不响应鼠标事件，删不了
点击删除图标没反应？::after 默认不可交互
即使图标显示正常，点了也没用，是因为 ::after 是伪元素，天生不能绑定事件监听器，也不能作为 click 的原生目标。
- 必须把点击逻辑挂到父元素上，再用
event.target === iconEl判断是否点中图标（需先用 JS 给伪元素“造个替身”） - 更简单做法：在父元素里放一个透明的
<span></span>，用z-index和position盖在伪元素上，监听它的 click - 或者直接放弃
::after，改用真实 DOM 元素 +display: none/block控制显隐，交互更可控
::after 配 :hover 显示删除图标，看着简单，实际卡点都在“显隐时机”“定位边界”“事件穿透”这三块。最容易被忽略的是：伪元素本身不是真实节点，所有交互和尺寸计算都得绕着它设计。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
