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

使用: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>

Answer 2

使用此代码

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>