Hier ist die Grundidee
Sie erstellen drei Li-Listen unter dem ul- oder li-Tag
<ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul>
Sie legen die Position des li-Tags fest: relativ; und geben Sie etwas Polsterung übrig
li { height: 40px; padding-left: 20px; display: flex; align-items: center; position: relative; }
Sie verwenden die CSS-Eigenschaft li::before und erstellen einen linken Rand.
li::before { content: ''; position: absolute; left: -16px; border-left: 2px solid black; height: 100%; width: 1px; }
Jetzt verwenden Sie die CSS-Eigenschaft li::after und machen drei Kreise darum
li::after { content: ''; display: inline-block; height: 10px; width: 10px; border-radius: 50%; background-color: blue; margin-left: -80px; }
Jetzt schneiden Sie endlich die Zeile aus der ersten und letzten Liste ab
li:first-child:before { top: 20px; } li:last-child:before { top: -20px; }
und Ergebnis:
vollständiger 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; }
Das obige ist der detaillierte Inhalt vonSo erstellen Sie einen verknüpften Aufzählungspunkt mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!