So erstellen Sie einen verknüpften Aufzählungspunkt mit CSS-CSS-Tutorial-php.cn

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

WBOY

Freigeben： 2024-07-17 14:49:57

Original

1134 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!