„Wenn ein Arbeiter seine Arbeit gut machen will, muss er zuerst seine Werkzeuge schärfen.“ – Konfuzius, „Die Gespräche des Konfuzius. Lu Linggong“
Titelseite > Programmierung > So erstellen Sie einen verknüpften Aufzählungspunkt mit CSS

So erstellen Sie einen verknüpften Aufzählungspunkt mit CSS

Veröffentlicht am 30.07.2024
Durchsuche:386

hier ist die Grundidee

Sie erstellen drei Li-Listen unter dem ul- oder li-Tag

        
  • item 1
  • item 2
  • item 3

Sie machen die li-Tag-Position: relativ; und geben Sie etwas linke Polsterung

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;
}

Image description

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;
}

Image description

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:

Image description

vollständiger Code:

html:

        
  • item 1
  • item 2
  • item 3

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;
}

Freigabeerklärung Dieser Artikel ist abgedruckt unter: https://dev.to/slimpython/how-to-make-linked-bullet-point-with-css-22c4?1 Bei Verstößen wenden Sie sich zum Löschen bitte an [email protected] Es
Neuestes Tutorial Mehr>

Haftungsausschluss: Alle bereitgestellten Ressourcen stammen teilweise aus dem Internet. Wenn eine Verletzung Ihres Urheberrechts oder anderer Rechte und Interessen vorliegt, erläutern Sie bitte die detaillierten Gründe und legen Sie einen Nachweis des Urheberrechts oder Ihrer Rechte und Interessen vor und senden Sie ihn dann an die E-Mail-Adresse: [email protected] Wir werden die Angelegenheit so schnell wie möglich für Sie erledigen.

Copyright© 2022 湘ICP备2022001581号-3