如何用CSS实现气泡框尾部定位及进度条白色圆点效果？

一、气泡框（.left-storage）尾部定位实现 #

气泡的尾部用CSS伪元素::before绘制三角形，核心是将其定位到气泡左侧垂直居中的位置，匹配参考设计效果：

.left-storage {
  position: relative; /* 必须设置，让伪元素基于当前元素定位 */
  /* 保留你原有气泡样式，比如背景色、内边距、圆角等 */
}

.left-storage::before {
  content: '';
  position: absolute;
  left: -10px; /* 让尾巴伸出气泡左侧 */
  top: 50%;
  transform: translateY(-50%); /* 实现垂直居中 */
  /* 利用border绘制三角形 */
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #你的气泡背景色; /* 颜色与气泡背景保持一致 */
}

可通过调整left值、border的像素大小，精准匹配参考图里尾巴的尺寸和位置。

二、进度条（progress-value）末端白色圆点实现 #

给进度条元素添加伪元素::after，定位到进度条右端并设置为圆形：

.progress-value {
  position: relative; /* 作为伪元素的定位基准 */
  height: 8px; /* 你的进度条原有高度 */
  background-color: #进度条底色;
  border-radius: 4px;
  /* 保留你原有进度条样式 */
}

.progress-value::after {
  content: '';
  position: absolute;
  right: -5px; /* 稍微超出进度条，视觉更协调 */
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: white;
}

如果进度条是动态宽度（随数值变化），这个圆点会自动跟随进度条右端移动，无需额外调整。

内容的提问来源于stack exchange，提问作者Abdulhamid Adebimpe