line between radio button in css - html

Question

I've made radio button like this :
and I want to draw line between my radio button in css like this :
I made my form look like this with table tag.
<table>
<tbody>
<tr>
<td>
<label for="answer_1">1</label>
</td>
<td>
<label for="answer_2">2</label>
</td>
<td>
<label for="answer_3">3</label>
</td>
<td>
<label for="answer_4">4</label>
</td>
<td>
<label for="answer_5">5</label>
</td>
</tr>
<tr>
<td>
<input name="answer" id="answer_1" type="radio">
</td>
<td>
<input name="answer" id="answer_2" type="radio">
</td>
<td>
<input name="answer" id="answer_3" type="radio">
</td>
<td>
<input name="answer" id="answer_4" type="radio">
</td>
<td>
<input name="answer" id="answer_5" type="radio">
</td>
</tr>
</tbody>
</table>
You can see the result here :
https://jsfiddle.net/zpejzpw5/
How can I draw line between my radio button?

Answer 1

Using the :after pseudo element, you should be able to achieve this:
td input {
position: relative;
}
td input:after {
display: block;
content: " ";
position: absolute;
bottom: 6px;
background: #000;
height: 2px;
width: 100%;
right: -12px;
}
td:last-child input:after {
display: none;
}
<table>
<tbody>
<tr>
<td>
<label for="answer_1">1</label>
</td>
<td>
<label for="answer_2">2</label>
</td>
<td>
<label for="answer_3">3</label>
</td>
<td>
<label for="answer_4">4</label>
</td>
<td>
<label for="answer_5">5</label>
</td>
</tr>
<tr>
<td>
<input name="answer" id="answer_1" type="radio">
</td>
<td>
<input name="answer" id="answer_2" type="radio">
</td>
<td>
<input name="answer" id="answer_3" type="radio">
</td>
<td>
<input name="answer" id="answer_4" type="radio">
</td>
<td>
<input name="answer" id="answer_5" type="radio">
</td>
</tr>
</tbody>
</table>

Answer 2

Use this code
td {
text-align: center
}
.line td {
position: relative;
}
.line td:after {
content: '';
border-bottom: 1px solid #ccc;
width: 100%;
height: 1px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(0, -100%);
z-index: -1;
}
.line td:last-child:after {
display: none;
}
}
<span id="reponses">
<table>
<tbody>
<tr>
<td>
<label for="answer_1">1</label>
</td>
<td>
<label for="answer_2">2</label>
</td>
<td>
<label for="answer_3">3</label>
</td>
<td>
<label for="answer_4">4</label>
</td>
<td>
<label for="answer_5">5</label>
</td>
</tr>
<tr class="line">
<td>
<input name="answer" id="answer_1" type="radio">
</td>
<td>
<input name="answer" id="answer_2" type="radio">
</td>
<td>
<input name="answer" id="answer_3" type="radio">
</td>
<td>
<input name="answer" id="answer_4" type="radio">
</td>
<td>
<input name="answer" id="answer_5" type="radio">
</td>
</tr>
</tbody>
</table>
</span>