bizard bizard - 6 months ago 7
HTML Question

line between radio button in css

I've made radio button like this :

enter image description here

and I want to draw line between my radio button in css like this :

enter image description here


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

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>