怎样在CSS中用::before和::after构建气泡指示箭头？-css教程-PHP中文网

核心原理是利用宽高为0元素的单色边框与透明边框叠加形成三角形；气泡箭头通过伪元素绝对定位实现，方向由对应边框颜色控制，尺寸变化需同步调整定位值。

怎样在css中用::before和::after构建气泡指示箭头？

用 `::before` 和 `::after` 画三角形箭头的核心原理

本质是利用边框色叠加形成的视觉三角：把一个宽高为 0 的元素，只设一个方向的边框（比如 border-bottom），其余三边设为透明或无色，就能“挤”出一个纯色三角。气泡箭头就是这个三角被嵌套在气泡容器的 ::before 或 ::after 伪元素里，再通过 position: absolute 定位到边缘。

常见错误是直接给伪元素设 width/height 还想拉出三角——没用，必须靠边框。另外，border-color 四个值顺序不能错：top right bottom left。

右侧气泡箭头的典型写法（含定位偏移）

假设气泡主体是 .tooltip，箭头要从右边中间伸出。关键点在于：::before 做底边（带背景色），::after 叠在上面做描边（可选），两者都用边框三角，但尺寸和颜色不同。

`.tooltip {
  position: relative;
  background: #333;
  color: white;
  padding: 8px 12px;
}
.tooltip::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -12px; /* 箭头尖端刚好贴住气泡右边缘 */
  margin-top: -6px; /* 垂直居中：三角高度的一半 */
  border: 6px solid transparent;
  border-left-color: #333; /* 只有左边框有色，形成向右的三角 */
}
.tooltip::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -11px;
  margin-top: -6px;
  border: 6px solid transparent;
  border-left-color: #fff; /* 比如加一层白边，模拟描边效果 */
}`

注意：right: -12px 和 margin-top: -6px 必须配合三角边框宽度（这里是 6px）；若改边框为 8px，这两个值也要同步调整，否则箭头会错位或露白边。