伪元素必须设 content: "" 才会渲染，三角形靠 border 实现，父容器需 position: relative，居中用 left: 50% + transform: translatex(-50%)，垂直偏移需包含 padding 和 border-width。

伪元素必须设 content: "" 才会渲染

不写这句，::before 根本不会出现在页面上，调试时看到箭头消失，第一反应就该查这个。它不是可选属性，是强制要求——哪怕内容为空，也得显式声明。常见错误是复制代码时漏掉引号，或写成 content: none（无效）、content: " "（带空格会撑开高度，破坏三角形形状）。

三角形靠 border 实现，不是靠 width/height

真正生成三角形的是边框的视觉交叠：把一个元素设为 width: 0; height: 0;，再只给某一条边设颜色、其余三边设 transparent。比如向下箭头用 border-top: 8px solid #333，同时配 border-left: 8px solid transparent 和 border-right: 8px solid transparent。注意四条边的 border-width 必须一致，否则不是等腰直角三角形；单位推荐用 px，避免 rem 在缩放时变形。

父容器不设 position: relative，箭头就会“飘走”

绝对定位的伪元素需要一个定位上下文，否则会逐层往上找最近的 position: relative / absolute / fixed 祖先，甚至落到 body 上。气泡本身必须加 position: relative，这是硬性前提。另外，如果气泡用了 border-radius，箭头根部容易被裁切，这时要微调 top 或 bottom 值，让箭头从圆角外侧伸出。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

居中对齐别硬算像素，用 left: 50% + transform: translateX(-50%)

箭头底边宽度 = border-width × 2（例如 border: 8px solid transparent → 底边宽 16px），但手动写 left: calc(50% - 8px) 容易出错，尤其在响应式场景下。更稳妥的做法是：left: 50% 把箭头左边缘移到中心线，再用 transform: translateX(-50%) 向左平移自身宽度一半。注意：IE9 不支持 transform，如需兼容，得降级用 left: calc(50% - 8px) 或 JS 补位。

最常被忽略的一点：箭头的垂直偏移量要包含气泡自身的 padding 和 border-width。比如气泡 padding: 12px，想让箭头尖顶在气泡顶部内边缘，top 得设为 -12px，而不是 -8px 或 0 —— 这个差值在高密度 UI 中特别明显。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！