伪元素提示不显示的主因是缺少content属性或父元素未设position: relative；需用content: "文本"或content: attr(data-tip)，配合display: block和绝对定位，并为移动端添加focus支持及降级方案。
hover时用::before或::after显示提示文字，但内容不显示
最常见原因是伪元素默认不渲染——它需要content属性，且不能为空字符串（content: ""会创建空盒，但无内容；而content: none直接禁用）。工具栏图标旁的提示信息必须显式写进content里。
- 用
content: "保存";，不是content: "";再靠JS塞文本 - 如果提示文字含单引号（如
Don't close），得转义为Don\'t close，否则CSS解析失败 - 伪元素默认是
display: inline，若提示框要宽高/背景/圆角，必须加display: block或inline-block - 别忘了给父元素设
position: relative，否则position: absolute的提示框会相对于body定位
提示框位置偏移不准，hover后飘到屏幕角落
伪元素用了position: absolute，但父容器没设position: relative，浏览器就往上找最近的定位上下文——常是，导致提示框脱离图标。
- 确保工具栏按钮（比如
<button class="toolbar-btn"></button>）有position: relative - 提示框用
top: 100%+left: 50%+transform: translateX(-50%)居中对齐图标底部，比固定left: 0更稳 - 若工具栏本身是
flex布局，注意align-items: center可能影响子元素基线，导致top: 100%计算偏差——此时改用bottom: 100%向上弹出更可靠
移动端touch设备上hover不触发
真机上手指划过不会触发:hover，iOS Safari甚至只在点击后短暂激活一次。纯CSS方案在这里失效。
- 别依赖
:hover做核心功能提示，至少加一层focus支持：.toolbar-btn:hover::after, .toolbar-btn:focus::after - 对触屏设备，用
@media (hover: none)检测并降级：隐藏伪元素提示，改用title属性（虽然丑但可用）或JS监听touchstart动态加class - 如果用JS控制显示，记得加
pointer-events: none到提示框上，否则它会挡住下方按钮的点击
多个工具栏按钮共用同一套伪元素样式，但提示文字不同
不能靠一个CSS规则统一写死content，因为CSS无法读取HTML属性值（除非用attr(data-tip)，但兼容性有限）。
- 推荐方式：每个按钮加
data-tip属性，CSS里用content: attr(data-tip)——主流浏览器都支持，包括iOS 14.5+ - 兼容旧版IE？放弃伪元素，改用
<span class="tooltip">保存</span>+visibility: hidden/opacity切换 - 避免用
content: "导出" "打印" "设置"这种多值写法——CSS不认，会整个声明失效
伪元素提示看着轻量，但content、定位上下文、移动端适配这三点漏掉任一，就会白忙活。尤其attr()取值和position: relative的父子关系，线上最容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
