如何在单选按钮之间划一条线？

Question

我一直在尝试使用HTML / CSS在下面的图片上应用相同的设计，这是我到目前为止所实现的。

.slider{
  display: flex;
  margin: 0 auto;
  text-align: center;
  li {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10rem;
    
  }

<ul class="slider">
          <li class="slider-item">
            <label for="f-option">In Depth Knowledge</label>
            <input type="radio" id="f-option">
          </li>
          <li class="slider-item">
            <label for="g-option">Exellence & Education</label>
            <input type="radio" id="g-option">
          </li>
          <li class="slider-item">
            <label for="k-option">In Depth Knowledge</label>
            <input type="radio" id="k-option">
          </li>
        </ul>

Answer 1

使用以下代码：

使用li{flex: 0 1 33%;}，将pseudo用作行:after

See fiddle

注意！

如果您希望用户只能选择一个单选按钮，请使用name attr

    .slider {
      display: flex;
      margin: 0 auto;
    }

    label {
      width: 80px;
      display: block;
    }

    input {
      margin-left: 30px;
      margin-right: -1px;
    }

    li {
      flex: 0 1 33%;
      list-style: none;
      position: relative;
    }

    li:not(:last-child):after {
      content: "";
      position: absolute;
      height: 1px;
      width: 100%;
      background: black;
      top: 45px;
    }

<ul class="slider">
  <li class="slider-item">
    <label for="f-option">In Depth Knowledge</label>
    <input type="radio" id="f-option" name="rb">
  </li>
  <li class="slider-item">
    <label for="g-option">Exellence & Education</label>
    <input type="radio" id="g-option" name="rb">
  </li>
  <li class="slider-item">
    <label for="k-option">In Depth Knowledge</label>
    <input type="radio" id="k-option" name="rb">
  </li>
</ul>