Html CSS正确定位伪元素

我在div中有一个输入类型范围，我使用伪元素before作为一个圆。我的意图是让它像拇指一样位于起始位置：我有以下html：

<div class="range">
    <input type="range" name="" class="progress" value="0" max="100" min="0"/>
</div>

这是一个有效的例子

---

我的目的是使before元素与范围的开始位置相同。

这有点不太清楚，但是将其添加到

。range:：before

：

.range::before {
    /* ... other css */
    position: absolute;
    margin-top: 11px;
}

将

内联块

添加到

.range:：before

和

input

中，并使用

垂直对齐：中对齐

将

输入的宽度设置为
宽度：计算（100%-15px）
。这15px是
.range:：before
元素的宽度

使用

transform:translate（100%，0）

请参见下面的演示：

/*范围*/
输入[类型=范围]{
-webkit外观：无；
利润率：10px0；
宽度：钙（100%-15px）；
显示：内联块；
垂直对齐：中间对齐；
填充：0；
边界：无；
}
输入[类型=范围]：焦点{
大纲：无；
}
输入[类型=范围]：-webkit滑块可运行轨迹{
宽度：100%；
高度：3倍；
光标：指针；
动画：0.2s；
盒影：0px 0px 0px 000000；
背景：#000；
边界半径：7px；
边框：0px实心#FFE000；
}
输入[类型=范围]：-webkit滑块拇指{
盒影：0px 0px 0px#000；
边框：2px实心#FFE000；
高度：15px；
宽度：15px；
边界半径：15px；
背景：#000；
光标：指针；
-webkit外观：无；
利润上限：-7px；
}
输入[类型=范围]：焦点：--webkit滑块可运行轨迹{
背景：#000；
}
输入[类型=范围]：-moz范围轨迹{
宽度：100%；
高度：3倍；
光标：指针；
动画：0.2s；
盒影：0px 0px 0px 000000；
背景：#000；
边界半径：7px；
边框：0px实心#FFE000；
}
输入[类型=范围]：-moz范围拇指{
盒影：0px 0px 0px#000；
边框：2px实心#FFE000；
高度：15px；
宽度：15px；
边界半径：15px；
背景：#000；
光标：指针；
}
输入[类型=范围]：-ms轨道{
宽度：100%；
高度：3倍；
光标：指针；
动画：0.2s；
背景：透明；
边框颜色：透明；
颜色：透明；
}
输入[类型=范围]：-ms填充下限{
背景：#000；
边框：0px实心#FFE000；
边界半径：14px；
盒影：0px 0px 0px 000000；
}
输入[类型=范围]：-ms填充上限{
背景：#000；
边框：0px实心#FFE000；
边界半径：14px；
盒影：0px 0px 0px 000000；
}
输入[类型=范围]：-ms thumb{
盒影：0px 0px 0px#000；
边框：2px实心#FFE000；
高度：15px；
宽度：15px；
边界半径：15px；
背景：#000；
光标：指针；
}
输入[类型=范围]：焦点：-毫秒填充下限{
背景：#000；
}
输入[类型=范围]：焦点：--ms填充上限{
背景：#000；
}
.射程{
位置：相对位置；
显示：表格；
保证金：0自动；
宽度：50vw；
}
.范围：：之前{
内容：''；
显示：内联块；
垂直对齐：中间对齐；
转换：转换（100%，0）；
宽度：15px；
高度：15px；
-moz边界半径：15px；
-webkit边界半径：15px；
边界半径：15px；
背景色：#69b6d5；
}

您试图使红色圆圈和黄色圆圈位于同一位置？在同一初始位置，yes@Aschab这就是你想要的把它们并排放在一起吗？使用

calc

调整了

input

的宽度，并使

input

和

inline block之前的

在我端不起作用，因此它不兼容交叉浏览器或其他东西。你使用的是什么浏览器@Aschabchrome，我只是看了看下面3个像素的圆圈

.range::before {
    /* ... other css */
    position: absolute;
    margin-top: 11px;
}