Skip to content

Instantly share code, notes, and snippets.

@bitbonsai

bitbonsai/coolest-ol-ever.html

Created April 7, 2018 10:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bitbonsai/f3e9716faa2dd6f8e94a65bba3714b18 to your computer and use it in GitHub Desktop.
Save bitbonsai/f3e9716faa2dd6f8e94a65bba3714b18 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
coolest-ol-ever.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>test</title>
</head>
<body>
<style>
ol {
counter-reset:li;
padding-bottom:10px;
position: relative;
list-style-type: none;
}
ol > li {
padding:5px 0 5px 55px;
margin-bottom:5px;
position: relative;
margin: .5em 0;
}
ol > li::before {
content:counter(li);
counter-increment:li;
position:absolute;
top:0;
left:0;
height:100%;
width:30px;
padding:0 10px 0 0;
color:#999;
font-size:22px;
line-height:35px;
text-align:right;
border-right:1px solid #ddd
}
ol > li > p:first-child {
margin-top:0
}
ol > li::after {
content:".";
display:block;
visibility:hidden;
line-height:0;
height:0
}
</style>
<ol>
<li>
<p>Testing 1</p>
</li>
<li>
<p>Testing 2</p>
</li>
<li>
<p>Testing 3</p>
<p>Testing 3</p>
<p>Testing 3</p>
<p>Testing 3</p>
</li>
</ol>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment