伪元素定位需父容器设position: relative，否则装饰会“飞走”；双线边框用::before/::after堆叠而非border-style: double；SVG装饰器须外层容器定位；图标对齐优先用transform而非top/left，并确保content和定位上下文完整。
伪元素定位比直接用 border 或 outline 更可控，但前提是父容器必须设 position: relative——漏掉这一步，所有装饰都会“飞走”。
伪元素画双线边框时为什么 margin 比 transform 更可靠
双线不是靠 border-style: double（它对宽度比例敏感、不支持渐变和圆角），而是用两个 ::before/::after 分别控制内外线。关键在于内缩方式：
-
margin在伪元素上生效，是因为它们是块级且无内容，margin会真实推动边界，形成可预测的间隙 -
transform: scale()会导致边框像素模糊，且在响应式缩放下间隙比例失真 - 如果要加
border-radius，两个伪元素必须用相同值，否则圆角错位
SVG 装饰器贴不到文字底部？先同步坐标系再定位
直接给 <path> 加 top 或 margin 完全无效——SVG 内部坐标系和 CSS 盒模型互不感知。正确做法是：
- 把
<svg>套进一个position: relative的宿主元素（比如<button>） - 对
<svg>本身设position: absolute; bottom: 0; width: 100% -
<path>的d属性必须基于比例设计（如viewBox="0 0 100 20"），避免写死像素值 - 固定
height会导致 viewBox 缩放失真，优先用height: auto
伪元素图标总对不齐？别碰 top/left，改用 transform
用 top: -2px 这类绝对偏移，一旦字体大小变化或页面 zoom，图标就飘走。真正稳定的对齐方式是：
立即学习“前端免费学习笔记（深入）”；
- 用
content: url(./icon.svg)替代 Unicode 字符，避免字体缺失和基线差异 - 设
width和height显式控制尺寸，否则 SVG 按原始宽高渲染 - 用
transform: translateY(-50%)或translateX(-50%)，基于自身尺寸偏移，不依赖外部上下文 - 确保父元素已设
position: relative，否则absolute会相对于 body 定位
最常被忽略的细节：所有伪元素都必须有 content（哪怕 content: ""），且父容器的 position: relative 不能被祖先的 transform 截断——如果父容器的某个上级有 transform，它会变成新的包含块，导致定位基准偏移。
