To create a line in HTML, I utilized an empty div with specified background-color and height, positioned absolutely to the desired location.
.line {
position: absolute;
top: 25px;
height: 5px;
width: 100%;
background-color: black;
}
Note: To center the radios, I updated the display: block; for .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;
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>