[How To] Hübsche Sortierte Liste

Ritzga

Eine hübsche sortierte Liste:

Vorschau

HTML:

<ol class="line">
	<li>maximum borkdrive doggorino, dat tungg tho h*ck yapper. Wrinkler long bois puggo I am bekom fat blep heckin good boys borkf, corgo h*ck many pats tungg heckin angery woofer</li>
	<li>very jealous pupper stop it fren most angery pupper I have ever seen pupper vvv waggy wags, puggorino long bois extremely cuuuuuute very jealous pupper. Smol you are</li>
	<li>doge, heck puggorino ruff</li>
	<li>pupper very good spot heckin good boys and girls blep boof</li>
	<li>frighten bork clouds, shibe. corgo. Boofers bork</li>
	<li>puggorino borkf long woofer tungg. big ol pupper. Ruff you are doing me a frighten pupper clouds, heck. You are doing me a frighten such</li>
	<li>Aqua doggo long water shoob super chub</li>
</ol>

CSS:

.line {
  position: relative;
  margin-left: -36px;
}
.line > li::before {
  content: "";
  position: absolute;
  width: 3px;
  background-color: #0c3c3a;
  top: 0;
  bottom: 0;
  left: -20px;
}
.line > li::after {
  text-align: center;
  font-weight: bold;
  padding-top: 13px;
  z-index: 10;
  content: counter(item);
  position: absolute;
  width: 50px;
  height: 35px;
  color: #ffeff7;
  background-color: #273C0C;
  border-radius: 50%;
  top: 0;
  left: -43px;
}
.line > li {
  counter-increment: item;
  padding: 10px 10px;
  margin-left: 2.5rem;
  min-height: 70px;
  position: relative;
  background-color: transparent;
  list-style: none;
}
@media (min-width: 768px) {
  .line > li {
    padding: 10px 10px 0 1.5rem;
  }
}
.line > li:nth-last-child(1)::before {
  width: 0;
}

Die Funktionsweise, ist recht einfach. Es wird eine sortierte List hierfür verwendet. Jedes Element besitzt eine Zahl, welche per Linie verbunden wird.

Falls ihr Fragen, oder Verbesserungen habt, dann schreibt es mir!

Livecode
Find live version here!

Vinlow

Hab ich gerade erst gesehen, sieht ja verdammt cool aus!