伪元素仅用于视觉呈现，不可点击；可点击按钮须用真实DOM元素并配合:hover显隐；移动端需JavaScript或@media(hover: hover)兼容；多按钮需注意定位与z-index。
hover 时用 ::before 或 ::after 显示按钮
直接在目标元素上写 :hover::before 即可触发伪元素渲染，但要注意：伪元素默认不响应鼠标事件，所以按钮交互必须靠父容器的 :hover 状态“捎带”出来。常见错误是把按钮逻辑全塞进伪元素里，结果点不中、无法 click。
实操建议：
- 伪元素只负责「视觉呈现」，比如图标、文字、背景色；实际可点击区域仍由父元素（如
<div class="item">）承担 - 确保父元素有明确宽高和
position: relative，否则伪元素定位会飘 - 用
content: ""是必须的——没有它，::before/::after根本不会渲染
.item {
position: relative;
padding: 12px;
}
.item:hover::after {
content: "✏️";
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
background: #007bff;
color: white;
padding: 4px 8px;
border-radius: 4px;
font-size: 14px;
}
按钮需要真正可点击？别用伪元素当按钮本体
伪元素不是 DOM 节点，document.querySelector("::after") 查不到，也不能绑定 addEventListener。想实现「悬停显示 + 点击触发」，得把按钮作为真实子元素插入，再用 CSS 控制显隐。
关键点：
立即学习“前端免费学习笔记（深入）”；
- 按钮用真实
<button>或<span>，加类名如action-btn - 初始设
.action-btn { opacity: 0; visibility: hidden; }，而不是display: none（后者会破坏 transition） -
:hover .action-btn触发显隐，配合transition更顺滑 - 如果按钮在父容器边缘外溢，记得给父元素加
overflow: visible
.item {
position: relative;
overflow: visible;
}
.action-btn {
position: absolute;
right: 4px;
top: 50%;
transform: translateY(-50%);
opacity: 0;
visibility: hidden;
transition: opacity 0.2s, visibility 0.2s;
}
.item:hover .action-btn {
opacity: 1;
visibility: visible;
}
移动端 hover 不生效？得兼容 touch 设备
纯 :hover 在 iOS 和 Android 的大部分浏览器里，只在模拟“悬停”（比如长按后短暂高亮）时触发一次，无法稳定维持。真正在触摸设备上“显示操作按钮”，得换思路。
可行方案：
- 放弃纯 CSS 方案，用 JavaScript 监听
touchstart+touchend模拟 hover 状态（例如加临时类is-hovered） - 或改用点击展开模式：首次点击显示按钮，再点一次执行操作（类似“编辑模式”开关）
- CSS 里可用
@media (hover: hover) and (pointer: fine)做精准判断，只对支持精细指针的设备启用 hover 样式
@media (hover: hover) and (pointer: fine) {
.item:hover .action-btn {
opacity: 1;
visibility: visible;
}
}
多个按钮堆叠错位？z-index 和定位容易踩坑
多个 ::before/::after 或多个真实按钮一起出现时，经常互相遮挡或挤出容器。根本原因常是 position: absolute 缺少参照系或层级混乱。
检查清单：
- 所有绝对定位子元素，父容器必须有
position: relative（或其它非static值） - 用
z-index控制叠层，但注意：只有定位元素才受z-index影响 - 避免同时用
top和bottom、或left和right去“夹”一个元素，容易因盒模型计算偏差导致偏移 - 若按钮需随内容高度自适应垂直居中，优先用
flex或grid布局替代transform: translateY
:hover::after 解决。 
