如何在<progress>标签创建的HTML进度条末端添加小圆点

原生<progress>是浏览器内置替换元素，不同内核对其内部伪元素的支持限制很多，无法直接在元素上挂载::before/::after伪元素实现末端圆点，通过外层容器嵌套的方式可以零侵入实现目标效果，不需要改动原有进度条的核心样式逻辑。

实现代码 #

HTML结构

只需要给原有的progress标签套一层相对定位的容器即可：

<div class="progress-container">
  <progress max="100" value="75"></progress>
</div>

CSS样式

原有进度条样式基本保留，通过容器的::after伪元素实现白色圆点，定位到进度填充的末端位置：

.progress-container {
  position: relative;
  width: 90%;
  /* 用CSS变量存储进度值，方便动态更新 */
  --progress-val: 75%;
}

progress {
  width: 100%;
  display: block;
  padding: 3px;
  border: 0 none;
  background: rgb(215, 211, 211);
  border-radius: 14px;
  /* 固定高度方便对齐圆点 */
  height: 14px;
}

progress::-moz-progress-bar {
  border-radius: 12px;
  background: linear-gradient(to right, hsl(6, 100%, 80%), hsl(335, 100%, 65%));
}

progress::-webkit-progress-bar {
  background: transparent;
  border-radius: 12px;
}

progress::-webkit-progress-value {
  border-radius: 12px;
  background: linear-gradient(to right, hsl(6, 100%, 80%), hsl(335, 100%, 65%));
}

/* 进度末端白色圆点 */
.progress-container::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ffffff;
  top: 50%;
  /* 偏移6px是圆点宽度的一半，保证圆点中心正好对齐进度末端 */
  left: calc(var(--progress-val) - 6px);
  transform: translateY(-50%);
  /* 可选：加轻微阴影匹配设计图的层次感 */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

动态进度适配 #

如果进度值是动态变化的，只需要在更新progress标签value属性的同时，修改容器上的--progress-val变量即可，参考JS逻辑：

const progress = document.querySelector('progress');
const container = document.querySelector('.progress-container');
// 示例：更新进度到80%
const newVal = 80;
progress.value = newVal;
container.style.setProperty('--progress-val', `${newVal}%`);

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