伪元素默认为inline，受行高、基线等影响而偏移；应设position: absolute并配合transform定位，注意父元素padding、transform对参照点的影响，且relative必须设在直接宿主上。
伪元素没设 position: absolute，却指望它“贴着父元素定位”
伪元素 ::before 和 ::after 默认是 display: inline，参与行内布局，不是“天然贴父元素”的。它会像普通文字一样受行高、基线、父容器 font-size 影响，导致看起来“下移”或“偏右”。尤其在 span、a 这类内联元素上加伪元素，问题最明显。
实操建议：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 父元素必须先设
position: relative（否则absolute会往上找，可能落到html上） - 伪元素一律写
position: absolute，且从基础样式就开始写，不要只塞在:hover里 - 避免用
margin-top或float调位置——它们会触发重排，还让伪元素继续占文档流空间 - 如果只是装饰箭头或小圆点，直接设
display: block+vertical-align: top有时比折腾定位更稳
top/right/bottom/left 的参照点不是父元素边框，而是 padding box
当你写 top: 0; right: 0;，伪元素的左上角对齐的是父元素 padding box 的右上角，不是 border 边缘。如果父元素有 padding: 12px，那伪元素离右边框就有 12px 缝隙，看起来像“没对齐”。
实操建议：
- 检查父元素是否真有
padding，有的话要么清掉，要么手动补偿：right: -12px - 用开发者工具选中伪元素，在 Elements 面板看它的
offsetParent是谁；再点父元素，看 Styles 里有没有transform、filter——这些会让参照点变成 border box - 想让伪元素“顶到父元素右上角”，优先用
top: 0; right: 0; transform: translate(50%, -50%)，而不是硬调right像素值
父元素用了 transform，却没意识到它悄悄换了定位上下文
哪怕只是 transform: translateZ(0) 或 opacity: 0.99，父元素也会创建新的 containing block。这时伪元素的 top: 0 就不再以父元素 padding box 为原点，而以这个新块的 border box 为准——视觉上就“偏了”。Safari 和旧版 Chrome 对此尤其敏感。
实操建议：
- 在 DevTools 的 Styles 面板搜
transform、filter、will-change，一个都不能漏 - 临时注释掉这些声明，看伪元素是否回归预期位置
- 若必须保留
transform，把position: relative提到它的上一级父容器上，别让它和 transform 同级 - 用
getBoundingClientRect()在控制台验证真实像素位置：document.querySelector('.my-btn::after').getBoundingClientRect()（注意：这个 API 不直接支持伪元素，得用getComputedStyle+ 计算模拟）
content 动态变化时 width/height 漂移，导致定位锚点失效
用 content: attr(data-count) 显示通知数字时，个位数（如 “3”）和两位数（如 “12”）宽度不同。如果伪元素靠 right: 0 锚定又没设 transform-origin，伸缩时中心会跑，看起来像“往右滑”或“跳动”。
实操建议：
- 给伪元素设固定
min-width（比如min-width: 24px），容纳最多两位数 - 用
transform: scaleX()替代width动画，起始态transform: scaleX(0)，hover 时scaleX(1) - 配合
transform-origin: right center，确保伸缩始终以右边缘为轴心 - 避免在伪元素里写
white-space: nowrap+text-overflow: ellipsis——这会干扰 layout，不如用 JS 截断后塞进data-属性
position: relative”——它必须是伪元素的**直接宿主**，且不能被 transform/filter 暗中劫持。多一层嵌套、多一个 flex 容器，都可能让参照链断裂。调试时盯着 offsetParent 和 containing block 看，比猜更省时间。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
