Skip to content

Instantly share code, notes, and snippets.

@nsa-yoda

nsa-yoda/CustomNumberedOL.html

Last active December 12, 2015 12:48
Show Gist options
  • Save nsa-yoda/4774668 to your computer and use it in GitHub Desktop.
Save nsa-yoda/4774668 to your computer and use it in GitHub Desktop.
Download ZIP
Custom numbered OL
Raw
CustomNumberedOL.html
<!DOCTYPE html>
<html>
<head>
<title>Styled OL Test</title>
<style>
ol { counter-reset: item; }
ol li { display: block }
ol li:before { content: counter(item) ". "; counter-increment: item; }
ol.custom{ padding: 0; counter-reset: item; }
ol.custom li.aa:before { content: counter(item) "A. "; counter-reset: subsection; }
ol.custom li.bb:before { content: counter(item) "B. "; counter-increment:subsection; }
ol.custom li.cc:before { content: counter(item) "C. "; counter-increment:subsection; }
</style>
</head>
<body>
<ol class="custom">
<li></li>
<li></li>
<li class="aa"></li>
<li class="bb"></li>
<li class="cc"></li>
<li></li>
<li></li>
<li class="aa"></li>
<li class="bb"></li>
<li class="cc"></li>
</ol>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment