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; }
The above is the detailed content of How to make linked bullet point with css. For more information, please follow other related articles on the PHP Chinese website!