用:before/:after画带尖角提示框的核心是仅用border透明边框生成三角形并精确定位，需设父容器position:relative、用px单位、避免:hover在移动端失效，且注意z-index和性能优化。
怎么用 :before 和 :after 画出带尖角的悬浮提示框
核心就两条：用伪元素生成一个三角形，再通过 transform 或 border 技巧把它“掰”成尖角，贴在提示框边缘。关键不是画多漂亮，而是让它不遮内容、不闪跳、不破布局。
常见错误是直接给 :after 设 width/height 再加 border，结果尖角位置飘、大小失真、或者在 Safari 里错位。真正稳的做法是只用 border，其余全靠透明边框撑出三角形：
-
:after设content: ""，position: absolute - 四边设不同方向的透明边框（比如要右上尖角，就设
border-top: 6px solid #333+border-left: 6px solid transparent+border-right: 6px solid transparent） - 用
top/left定位到气泡边缘，再微调margin补偿边框偏移
为什么尖角经常对不齐 tooltip 主体或文字
因为 :before 和 :after 默认是行内级，且不占文档流，但定位时如果父容器没设 position: relative，它们会往上层找定位上下文，导致坐标系错乱。更隐蔽的问题是字体渲染差异——Chrome 和 Firefox 对 em 单位下 line-height 的处理不同，影响尖角垂直居中。
实操建议：
- tooltip 容器必须加
position: relative - 尖角伪元素用
px定位，别用em或% - 如果 tooltip 贴着文字触发，把尖角
top设为100%+margin-top: -2px，比单纯top: 100%更准 - 避免在
:hover里同时改opacity和transform，容易触发重排导致尖角抖动
移动端点击后气泡不消失？:hover 在 iOS 上根本不管用
iOS Safari 默认把 :hover 延迟到第一次点击之后才激活，而且只维持很短时间。所以纯 CSS 的 :hover 气泡在手机上基本等于失效——点一下出现，再点一下就没了，用户根本来不及看。
解决路径只有两个：
- 改用 JavaScript 控制类名，监听
touchstart和click，并加pointer-events: none防止遮挡底层操作 - 如果必须用纯 CSS，至少加
@media (hover: hover) and (pointer: fine)媒体查询，把:hover逻辑仅限桌面设备，移动端 fallback 到:focus-within或[data-active]类
别指望 :active 能撑起整个交互——它只在按下的那一帧生效，松手就消失。
性能陷阱：伪元素太多导致渲染卡顿
每个 :before 和 :after 都是独立的渲染层，尤其当页面有几十个 tooltip 同时存在（比如表格每行一个），GPU 会频繁合成图层，低端安卓机上滑动直接掉帧。
优化要点很实际：
- 把尖角尺寸控制在
6px以内，边框宽度越大，抗锯齿开销越高 - 避免在伪元素里用
box-shadow或filter，这两样会强制创建新图层 - 如果 tooltip 内容简单，干脆用 SVG
<path></path>替代伪元素——DOM 节点少，复用率高，CSS 也不用写两套
最常被忽略的是 z-index 层级混乱：尖角伪元素和 tooltip 主体没在同一 stacking context 里，结果尖角被隔壁卡片的阴影盖住，查半天发现只是少了个 z-index: 1。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
