Skip to content

Instantly share code, notes, and snippets.

@jeremypage

jeremypage/big-number-list.css

Last active April 2, 2020 11:01
Show Gist options
  • Save jeremypage/33c7fdd7e267046b17609b1bcc0f63b3 to your computer and use it in GitHub Desktop.
Save jeremypage/33c7fdd7e267046b17609b1bcc0f63b3 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. jeremypage revised this gist Apr 2, 2020. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions big-number-list.html
    View file
    Original file line number Diff line number Diff line change
    @@ -5,6 +5,7 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ordered list with big numbers</title>
    <link href="big-number-list.css" rel="stylesheet" type="text/css" />
    </head>

    <body>
  2. jeremypage created this gist Apr 2, 2020.
    24 changes: 24 additions & 0 deletions big-number-list.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,24 @@
    /* Creates extra-large ordered list numbering */

    .bignum {
    margin-left: 0;
    counter-reset: listItem;
    }

    .bignum>li {
    list-style: none;
    position: relative;
    margin-left: 2em;
    margin-bottom: 1em;
    padding-left: 1em;
    min-height: 2em;
    }

    .bignum>li:before {
    position: absolute;
    counter-increment: listItem;
    content: counter(listItem) ".";
    font-size: 2em;
    top: -0.1em;
    left: -1em;
    }
    30 changes: 30 additions & 0 deletions big-number-list.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,30 @@
    <!DOCTYPE html>
    <html lang="en">

    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ordered list with big numbers</title>
    </head>

    <body>
    <ol class="bignum">
    <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Maxime error aliquam, omnis voluptatum magnam
    corrupti ipsum quam aspernatur dolores? Blanditiis omnis numquam veniam qui similique repellat
    exercitationem deserunt maxime modi.</li>
    <li>Eum numquam ex fugiat culpa earum nobis adipisci ducimus, pariatur quis delectus soluta ea excepturi velit
    dolorem sint, quam ipsam voluptatum, voluptas facilis similique suscipit aliquam voluptatem. Eaque, vero
    voluptatum.</li>
    <li>Molestiae ipsa expedita fugit facere modi hic ipsam veniam aut dolorum! Magnam minus quam nam adipisci eius
    cum exercitationem? Asperiores pariatur perspiciatis ipsa deserunt similique eius velit quis voluptas.
    Animi.</li>
    <li>Assumenda modi magnam sit omnis, saepe nobis quasi debitis similique beatae, accusamus quaerat dolorum nemo,
    inventore molestias tempora accusantium vero? Velit libero porro ab temporibus ipsam impedit rem assumenda
    in.</li>
    <li>Accusantium reprehenderit sequi exercitationem ipsam aliquid porro modi delectus ut! Alias et quaerat
    laudantium sed, obcaecati aut consequatur quo voluptatibus minima molestiae maiores expedita libero earum
    dolorum. Doloribus, dolore numquam.</li>
    </ol>
    </body>

    </html>