Heim > Web-Frontend > CSS-Tutorial > So erstellen Sie einen verknüpften Aufzählungspunkt mit CSS

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

WBOY
Freigeben: 2024-07-17 14:49:57
Original
1121 Leute haben es durchsucht

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>
Nach dem Login kopieren

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;
}
Nach dem Login kopieren

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;
}
Nach dem Login kopieren

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

Nach dem Login kopieren

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;
}
Nach dem Login kopieren

und Ergebnis:

Image description

vollständiger Code:

html:

  <ul>
          <li>item 1</li>
          <li>item 2</li>
          <li>item 3</li>
        </ul>
Nach dem Login kopieren

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

Nach dem Login kopieren

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!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage