CSS 올바른 위치에 의사 요소

Question

div 안에 입력 유형 범위가 있고 '이전'의사 원을 원으로 사용하고 있습니다. 그 시작 위치에서 엄지 손가락처럼하는 나의 의도는 다음 CSS를

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

: 나는 다음과 같은 HTML이 여기

.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를 정렬 그들이 vetically vertical-align: middle를 사용하여.

2. input에서 width: calc(100% - 15px)까지의 너비를 설정하십시오. 이 15 픽셀은 .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 및 input에

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

JSFiddle