Skip to content

Instantly share code, notes, and snippets.

View kuroshio's full-sized avatar

Patrick Chin kuroshio

View GitHub Profile
@kuroshio
kuroshio / nested-counter.html
Created May 15, 2018 03:06
Example of hierarchical nested counters using ordered lists and SCSS. No JavaScript required. Supports different color for counter and proper indentation for multi-line bullet content.
<ol>
<li>Level 1 list item
<ol>
<li>Level 2 list item</li>
<li>Level 2 list item</li>
</ol>
</li>
<li>Level 1 list item
<ol class="lower-roman">
<li>Level 2 list item</li>
@kuroshio
kuroshio / nested-counter-withjs.html
Last active May 15, 2018 03:06
Example of hierarchical nested counters using ordered lists with CSS and JavaScript. Supports different color for counter and proper indentation for multi-line bullet content.
<!doctype html>
<html lang="en">
<head>
<title>Nested Counters Example</title>
<style>
ol {
counter-reset: section;
}
@kuroshio
kuroshio / nested-counter-nojs.html
Last active May 15, 2018 03:07
HTML & CSS-only example of hierarchical nested counters using ordered lists. No JavaScript required. Supports different color for counter and proper indentation for multi-line bullet content.
<!doctype html>
<html lang="en">
<head>
<title>Nested Counters Example</title>
<style>
ol {
counter-reset: section;
}