Как нарисовать линию между переключателями?

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

См. Скрипку

ПРИМЕЧАНИЕ!

Если вы хотите, чтобы пользователь мог выбрать только одну из переключателей, используйте 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>