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
CSS: Ordered list with bigger numbers
Raw
big-number-list.css
/* 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;
}
Raw
big-number-list.html
<!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>
<link href="big-number-list.css" rel="stylesheet" type="text/css" />
</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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment