Maison > Article > interface Web > Comment créer une puce liée avec CSS
voici l'idée de base
vous faites trois listes de li sous la balise ul ou li
<ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul>
vous faites la position de la balise li : relative ; et donne un peu de rembourrage gauche
li { height: 40px; padding-left: 20px; display: flex; align-items: center; position: relative; }
vous utilisez la propriété li::before css et créez une bordure gauche autour.
li::before { content: ''; position: absolute; left: -16px; border-left: 2px solid black; height: 100%; width: 1px; }
Maintenant, vous utilisez la propriété css li::after et faites trois cercles autour d'elle
li::after { content: ''; display: inline-block; height: 10px; width: 10px; border-radius: 50%; background-color: blue; margin-left: -80px; }
Maintenant, vous recadrez enfin la ligne de la première et de la dernière liste
li:first-child:before { top: 20px; } li:last-child:before { top: -20px; }
et résultat :
code complet :
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; }
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!