CSS Правильно позиционирующий псевдоэлемент

Question

У меня есть диапазон входного типа внутри div, и я использую псевдоэлемент «раньше» в качестве круга. Мое намерение состоит в том, чтобы он был как большой палец в исходное положение: У меня есть следующий 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. Принесите .range::before над желтой точкой с использованием transform: translate(100%, 0)

Смотреть демо ниже:

/* 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

Это немного Hacky, но как о добавлении это .range::before:

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

JSFiddle