How to draw a line between radio buttons? - html

Question

I have been trying to apply the same design on the image below using HTML/CSS and that is what I have achieved so far.
.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

Use code as below:
Using li{flex: 0 1 33%;} and for line use pseudo as :after
See fiddle
NOTE!
If you want the user can select only one of the radio buttons use 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>