どのように水平線をボタンの後ろに置くのですか？

Question

こんにちは、私は、私はイメージを使用していた前にボタンの背後にバックグラウンドラインを作成しようとしていたが、私はラインが欲しい。

<div class="feedback-option"> 
    <div class="radios2"> 
    <label> 
     <input type="radio" name="rating-1" value="1"> 
     <span>1</span> 
    </label> 
    <label> 
     <input type="radio" name="rating-1" value="2" /> 
     <span>2</span> 
    </label> 
    <label> 
     <input type="radio" name="rating-1" value="3"> 
     <span>3</span> 
    </label> 
    <label> 
     <input type="radio" name="rating-1" value="4"> 
     <span>4</span> 
    </label> 
    <label> 
     <input type="radio" name="rating-1" value="5"> 
     <span>5</span> 
    </label> 
    </div> 
</div> 

JsFiddle

Answer 1

HTMLにはラインはありませんので。私は空をと追加することによって同じことを達成しました。background-colorとheightです。必要に応じてposition: absoluteを置きます。

.line { 
    position: absolute; 
    top: 25px; 
    height: 5px; 
    width: 100%; 
    background-color: black; 
} 

P .:私はあなたがラジオをセンターしていたと思います。そのためにdisplay: block;を.radios2に変更しました。

.radios2 { 
 
    display: block; 
 
    text-align: center; 
 
} 
 

 
.line { 
 
    position: absolute; 
 
    top: 25px; 
 
    height: 5px; 
 
    width: 100%; 
 
    background-color: black; 
 
} 
 

 
.radios2 label + label { 
 
    margin-left: 10px; 
 
} 
 

 
.radios2 input[type="radio"] { 
 
    opacity: 0; 
 
    /* hidden but still tabable */ 
 
    position: absolute; 
 
} 
 

 
.radios2 input[type="radio"] + span { 
 
    display: block; 
 
    line-height: 40px; 
 
    height: 40px; 
 
    width: 40px; 
 
    border-radius: 50%; 
 
    background: #eee; 
 
    color: #555; 
 
    -webkit-transform: scale(1); 
 
    transform: scale(1); 
 
} 
 

 
.radios2 input[type="radio"]:not(:checked) + span:hover { 
 
    cursor: pointer; 
 
    -webkit-transform: scale(1.25); 
 
    transform: scale(1.25); 
 
    -webkit-transition: -webkit-transform 0.2s ease-in; 
 
    transition: -webkit-transform 0.2s ease-in; 
 
    transition: transform 0.2s ease-in; 
 
    transition: transform 0.2s ease-in, -webkit-transform 0.2s ease-in; 
 
} 
 

 
.radios2 input[type="radio"]:checked + span { 
 
    color: #D9E7FD; 
 
    background-color: #4285F4; 
 
} 
 

 
.radios2 input[type="radio"]:focus + span { 
 
    color: #fff; 
 
} 
 

 
label { 
 
    display: inline-block; 
 
}

<div class="feedback-option"> 
 
<div class="line"></div> 
 
    <div class="radios2"> 
 
    <label> 
 
     <input type="radio" name="rating-1" value="1"> 
 
     <span>1</span> 
 
    </label> 
 
    <label> 
 
     <input type="radio" name="rating-1" value="2" /> 
 
     <span>2</span> 
 
    </label> 
 
    <label> 
 
     <input type="radio" name="rating-1" value="3"> 
 
     <span>3</span> 
 
    </label> 
 
    <label> 
 
     <input type="radio" name="rating-1" value="4"> 
 
     <span>4</span> 
 
    </label> 
 
    <label> 
 
     <input type="radio" name="rating-1" value="5"> 
 
     <span>5</span> 
 
    </label> 
 
    </div> 
 
</div>