Rumah >hujung hadapan web >tutorial css >Bagaimana untuk membuat titik bullet dipautkan dengan css
ini ialah idea asas
anda membuat tiga senarai li di bawah tag ul atau li
<ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul>
anda membuat kedudukan tag li: relatif; dan berikan sedikit pelapik kiri
li { height: 40px; padding-left: 20px; display: flex; align-items: center; position: relative; }
anda menggunakan li::before css property dan buat sempadan kiri di sekeliling.
li::before { content: ''; position: absolute; left: -16px; border-left: 2px solid black; height: 100%; width: 1px; }
Kini anda menggunakan li::after css property dan buat tiga bulatan di sekelilingnya
li::after { content: ''; display: inline-block; height: 10px; width: 10px; border-radius: 50%; background-color: blue; margin-left: -80px; }
Kini akhirnya anda memangkas baris dari senarai pertama dan terakhir
li:first-child:before { top: 20px; } li:last-child:before { top: -20px; }
dan hasil:
kod penuh:
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; }
Atas ialah kandungan terperinci Bagaimana untuk membuat titik bullet dipautkan dengan css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!