這是基本思想
您在 ul 或 li 標籤下建立三個 li 清單
你使 li 標籤位置:相對;並給予一些左側填充
li { height: 40px; padding-left: 20px; display: flex; align-items: center; position: relative; }
你使用 li::before css 屬性並設定左邊框。
li::before { content: ''; position: absolute; left: -16px; border-left: 2px solid black; height: 100%; width: 1px; }
現在你使用 li::after css 屬性並在它周圍畫三個圓圈
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; }
結果:
完整代碼:
html:
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; }
免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。
Copyright© 2022 湘ICP备2022001581号-3