Navigation

    • Login
    • Search
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • TeamSpeak

    [How To] Hübsche Sortierte Liste

    CSS
    2
    2
    706
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • Ritzga
      Ritzga last edited by

      Eine hübsche sortierte Liste:

      Vorschau
      line.png

      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!

      1 Reply Last reply Reply Quote 0
      • Vinlow
        Vinlow last edited by

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

        “Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live”

        1 Reply Last reply Reply Quote 0
        • First post
          Last post