CSS如何为input滑动条滑块添加伪元素 实现伪元素上嵌套伪元素

问题根因 #

浏览器原生的滑动条滑块伪元素（::-webkit-slider-thumb、::-moz-range-thumb）属于浏览器内置的特殊伪部件，不支持嵌套::before/::after伪元素，这是你的代码无法生效的核心原因。

解决方案 #

推荐直接通过多重背景+径向渐变的方式实现需求，无需额外元素，修改后的可运行代码如下：

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 0.1rem;
  background: #176D8A;
  outline: none;
  opacity: 1;
  transition: opacity .2s;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 1px solid #000;
  cursor: pointer;
  /* 两层背景：上层是中心的蓝色圆点，下层是白色底 */
  background: radial-gradient(#176D8A 0 0.5rem, transparent 0.5rem) center / 100% 100% no-repeat, #FFFFFF;
}

.slider::-moz-range-thumb {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 1px solid #000;
  cursor: pointer;
  /* 火狐下同样用渐变实现圆点 */
  background: radial-gradient(#176D8A 0 0.5rem, transparent 0.5rem) center / 100% 100% no-repeat, #FFFFFF;
}

<input type="range" min="1" max="100" value="50" class="slider" id="myRange">

如果后续需要实现更复杂的滑块样式，也可以选择将原生滑块设置为全透明，再通过JavaScript监听滑动事件，控制自定义的滑块DOM元素同步移动即可。

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