CSS正确定位伪元素

Question

我有一个div内的输入类型范围，我将伪元素'before'用作圆。我的本意是，它像在起始位置大拇指：我有以下的html：

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

与下面的CSS：

.range::before{ 
    content: ''; 
    display: inline-block; 
    width: 15px; 
    height: 15px; 
    -moz-border-radius: 15px; 
    -webkit-border-radius: 15px; 
    border-radius: 15px; 
    background-color: #69b6d5; 
} 

下面是一个正常运作的fiddle

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

Answer 1

1. 新增inline-block到.range::before和input和对准他们vetically使用vertical-align: middle。

2. 将宽度input设置为width: calc(100% - 15px)。这15px是.range::before元素的宽度。

3. 使用transform: translate(100%, 0)

观看演示下面带上.range::before在黄点：

/* RANGE */ 
 

 
input[type=range] { 
 
    -webkit-appearance: none; 
 
    margin: 10px 0; 
 
    width: calc(100% - 15px); 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    padding: 0; 
 
    border: none; 
 
} 
 
input[type=range]:focus { 
 
    outline: none; 
 
} 
 
input[type=range]::-webkit-slider-runnable-track { 
 
    width: 100%; 
 
    height: 3px; 
 
    cursor: pointer; 
 
    animate: 0.2s; 
 
    box-shadow: 0px 0px 0px #000000; 
 
    background: #FFE000; 
 
    border-radius: 7px; 
 
    border: 0px solid #FFE000; 
 
} 
 
input[type=range]::-webkit-slider-thumb { 
 
    box-shadow: 0px 0px 0px #FFE000; 
 
    border: 2px solid #FFE000; 
 
    height: 15px; 
 
    width: 15px; 
 
    border-radius: 15px; 
 
    background: #FFE000; 
 
    cursor: pointer; 
 
    -webkit-appearance: none; 
 
    margin-top: -7px; 
 
} 
 
input[type=range]:focus::-webkit-slider-runnable-track { 
 
    background: #FFE000; 
 
} 
 
input[type=range]::-moz-range-track { 
 
    width: 100%; 
 
    height: 3px; 
 
    cursor: pointer; 
 
    animate: 0.2s; 
 
    box-shadow: 0px 0px 0px #000000; 
 
    background: #FFE000; 
 
    border-radius: 7px; 
 
    border: 0px solid #FFE000; 
 
} 
 
input[type=range]::-moz-range-thumb { 
 
    box-shadow: 0px 0px 0px #FFE000; 
 
    border: 2px solid #FFE000; 
 
    height: 15px; 
 
    width: 15px; 
 
    border-radius: 15px; 
 
    background: #FFE000; 
 
    cursor: pointer; 
 
} 
 
input[type=range]::-ms-track { 
 
    width: 100%; 
 
    height: 3px; 
 
    cursor: pointer; 
 
    animate: 0.2s; 
 
    background: transparent; 
 
    border-color: transparent; 
 
    color: transparent; 
 
} 
 
input[type=range]::-ms-fill-lower { 
 
    background: #FFE000; 
 
    border: 0px solid #FFE000; 
 
    border-radius: 14px; 
 
    box-shadow: 0px 0px 0px #000000; 
 
} 
 
input[type=range]::-ms-fill-upper { 
 
    background: #FFE000; 
 
    border: 0px solid #FFE000; 
 
    border-radius: 14px; 
 
    box-shadow: 0px 0px 0px #000000; 
 
} 
 
input[type=range]::-ms-thumb { 
 
    box-shadow: 0px 0px 0px #FFE000; 
 
    border: 2px solid #FFE000; 
 
    height: 15px; 
 
    width: 15px; 
 
    border-radius: 15px; 
 
    background: #FFE000; 
 
    cursor: pointer; 
 
} 
 
input[type=range]:focus::-ms-fill-lower { 
 
    background: #FFE000; 
 
} 
 
input[type=range]:focus::-ms-fill-upper { 
 
    background: #FFE000; 
 
} 
 
.range { 
 
    position: relative; 
 
    display: table; 
 
    margin: 0 auto; 
 
    width: 50vw; 
 
} 
 
.range::before { 
 
    content: ''; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    transform: translate(100%, 0); 
 
    width: 15px; 
 
    height: 15px; 
 
    -moz-border-radius: 15px; 
 
    -webkit-border-radius: 15px; 
 
    border-radius: 15px; 
 
    background-color: #69b6d5; 
 
}

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

让我知道你对这个意见。谢谢！

Answer 2

这是一个有点哈克，但如何增加这.range::before：

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

JSFiddle