h1 Custom styling ordered lists

section
  h2 No CSS
  ol
    li This is the first item
    li This is the second item
    li This is the third item

section
  h2 Element padded
  ol.oldschool
    li
      span This is the first item
    li
      span This is the second item
    li
      span This is the third item
 
section
  h2 Using Counter
  ol.counter
    li This is the first item
    li This is the second item
    li This is the third item

section
  h2 Using Counter and transitions
  ol.counter.animated
    li This is the first item
    li This is the second item
    li This is the third item
 
section
  h2 Zero padded
  ol.counter.zeropadded
    li This is the first item
    li This is the second item
    li This is the third item
 
section
  h2 Lower Roman
  ol.counter.lower-roman
    li This is the first item
    li This is the second item
    li This is the third item

section
  h2 Upper Roman
  ol.counter.upper-roman
    li This is the first item
    li This is the second item
    li This is the third item

section
  h2 Georgian
  ol.counter.georgian
    li This is the first item
    li This is the second item
    li This is the third item

section
  h2 Armenian
  ol.counter.armenian
    li This is the first item
    li This is the second item
    li This is the third item

section
  h2 Lower Latin
  ol.counter.lower-latin
    li This is the first item
    li This is the second item
    li This is the third item

section
  h2 Upper Latin
  ol.counter.upper-latin
    li This is the first item
    li This is the second item
    li This is the third item

section
  h2 Lower Greek
  ol.counter.lower-greek
    li This is the first item
    li This is the second item
    li This is the third item
View Compiled 
body {
  font-family: helvetica, arial, sans-serif;
  color: #f8f8f8;
  background: #1a1a1a;
}
h1, h2 {
  font-weight: lighter;
}
section {
  width: 45%;
  float: left;
  padding: 5px;
}
.oldschool {
  li {
    color: green;
  }
  span {
    color: lime;
  }
}
.counter {
  counter-reset: list;
  li {
    list-style: none;
    position: relative;
    color: lime;
    &:before {
      counter-increment: list;
      content: counter(list) '.';
      position: absolute;
      top: 0px;
      left: -1.2em;
      color: green;
    }
  }
}
.animated {
  li:before {
    transition: 0.5s;
    color: green;
  }
  li:hover:before {
    color: white;
    transform: scale(1.5);
  }
}
.zeropadded {
  li:before {
    content: counter(list,decimal-leading-zero) '.';
    left: -2em;
  }
}
.lower-roman {
  li::before {
    content: counter(list,lower-roman) '.';
    left: -2em;
  }
  li:before {
    content: counter(list,upper-roman) '.';
    left: -2em;
  }
}
.georgian {
  li:before {
    content: counter(list,georgian) '.';
    left: -2em;
  }
}
.armenian {
  li:before {
    content: counter(list,armenian) '.';
    left: -2em;
  }
}
.lower-latin {
  li:before {
    content: counter(list,lower-latin) '.';
    left: -2em;
  }
}
.upper-latin {
  li:before {
    content: counter(list,upper-latin) '.';
    left: -2em;
  }
}
.lower-greek {
  li:before {
    content: counter(list,lower-greek) '.';
    left: -2em;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.