here is the basic idea
you make three li list under ul or li tag
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
you make the li tag position: relative; and give some left padding
li {
height: 40px;
padding-left: 20px;
display: flex;
align-items: center;
position: relative;
}
you use li::before css property and make left border around.
li::before {
content: '';
position: absolute;
left: -16px;
border-left: 2px solid black;
height: 100%;
width: 1px;
}
Now you use li::after css property and make three circles around it
li::after {
content: '';
display: inline-block;
height: 10px;
width: 10px;
border-radius: 50%;
background-color: blue;
margin-left: -80px;
}
Now finally you crop the line from first and last list
li:first-child:before {
top: 20px;
}
li:last-child:before {
top: -20px;
}
and result:
full code:
html:
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
css:
li {
height: 40px;
padding-left: 20px;
display: flex;
align-items: center;
position: relative;
}
li::before {
content: '';
position: absolute;
left: -16px;
border-left: 2px solid black;
height: 100%;
width: 1px;
}
li::after {
content: '';
display: inline-block;
height: 10px;
width: 10px;
border-radius: 50%;
background-color: blue;
margin-left: -80px;
}
li:first-child:before {
top: 20px;
}
li:last-child:before {
top: -20px;
}
Top comments (0)