линии между радиокнопкой в ​​CSS

Question

Я сделал радио-кнопка, как это:

, и я хочу, чтобы нарисовать линию между моей радиокнопкой в ​​CSS так:

Я сделал свою форму похожи на это с помощью тега таблицы.

<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> 

Вы можете увидеть результат здесь: https://jsfiddle.net/zpejzpw5/
Как я могу нарисовать линию между моей кнопкой радио?

Answer 1

Используйте этот код

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>

Answer 2

Используя элемент :after псевдо, вы должны быть в состоянии достичь этого:

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>