<!-- Tutorial from Design Shack
https://designshack.net/articles/css/5-simple-and-practical-css-list-styles-you-can-copy-and-paste/ -->
<! DOCTYPE html>
<html>
<head>
<title>Big Numbers Ordered List</title>
</head>
<body>
<div>
<ol>
<li><span>01</span><p>In locavore voluptate assumenda. Non raw denim sapiente aute small batch fap. Raw denim cliche lo-fi umami cray incididunt sunt before they sold out. Viral mollit flexitarian locavore, beard readymade eiusmod anim.</p></li>
<li><span>02</span><p>In locavore voluptate assumenda. Non raw denim sapiente aute small batch fap. Raw denim cliche lo-fi umami cray incididunt sunt before they sold out. Viral mollit flexitarian locavore, beard readymade eiusmod anim.</p></li>
<li><span>03</span><p>In locavore voluptate assumenda. Non raw denim sapiente aute small batch fap. Raw denim cliche lo-fi umami cray incididunt sunt before they sold out. Viral mollit flexitarian locavore, beard readymade eiusmod anim.</p></li>
<li><span>04</span><p>In locavore voluptate assumenda. Non raw denim sapiente aute small batch fap. Raw denim cliche lo-fi umami cray incididunt sunt before they sold out. Viral mollit flexitarian locavore, beard readymade eiusmod anim.</p></li>
</ol>
</div>
</body>
</html>
/* browser reset */
* {
margin: 0;
padding: 0;
}
div {
width: 500px;
margin: 20px auto;
}
/* list styles */
ol {
list-style: none;
color: #ccc;
}
ol li {
font: bold 24pt helvetica, arial, sans-serif;
position: relative;
margin-bottom: 20px;
}
li p {
font: 12pt helvetica, arial, sans-serif;
color: #555;
padding-left: 60px;
}
span {
position: absolute;
line-height: 25px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.