h1 Custom styling lists with CSS

p Custom indenting unordered and ordered lists via CSS.

section
  h2 Custom unordered lists
  p Following is the customized un-ordered list styled with css for proper indenting as according to our need.
  ul.post-list
    li This is the first item
    li This is the second item
    li This is the third item
    li This is the fourth item
    li This is the fifth item
    li This is the sixth item

section
  h2 Custom ordered lists
  p Following is the customized ordered list styled with css for proper indenting as according to our need.
  ol.post-list
    li This is the first item
    li This is the second item
    li This is the third item
    li This is the fourth item
    li This is the fifth item
    li This is the sixth item

section
  h2 Custom icon unordered lists
  p Following is the customized ordered list styled with css for proper indenting as according to our need.
  ul.post-list.hash-icon
    li This is the first item
    li This is the second item
    li This is the third item
    li This is the fourth item
    li This is the fifth item
    li This is the sixth item

section
  h2 Place bracet in ordered lists
  p Following is the customized ordered list styled with css for proper indenting as according to our need.
  ol.post-list.place-bracet
    li This is the first item
    li This is the second item
    li This is the third item
    li This is the fourth item
    li This is the fifth item
    li This is the sixth item
View Compiled 
body {
  background-color: #eee;
  color: #333;
  padding: 1%;
}
section {
  width: 40%;
  float: left;
  padding: 1%;
}

//
// Global list reset
//
ul, ol {
  padding: 0;
  list-style: none;
  list-style-image: none;
}

//
// Custom list style
//
.post-list {
  counter-reset: post; // let counter = post
  margin-bottom: 30px;
  &> li {
   margin-left: 30px;
   margin-bottom: 12px;
   padding-top: 2px;
  }
  &> li:before {
    position: absolute;
    display: inline-block;
    box-sizing: border-box;
    width: 58px;
    margin-left: -58px;
    text-align: right;
  }
}

//
// Un-ordered list
//
ul.post-list {
  &> li:before {
    // padding-top: 6px;
    padding-right: 15px;
    font-size: 14.3px;
    content: "\2022"; // "•"
  }
}

//
// Ordered list
//
ol.post-list {
  &> li:before {
    padding-right: 12px;
    counter-increment: post;
    content: counter(post) "\002E"; // "."
  }
}


//
// Hash icon on unordered list
//
ul.hash-icon {
  &> li:before {
    // padding-top: 6px;
    padding-right: 15px;
    font-size: 14.3px;
    content: "#";
  }
}

//
// Replace bracet on ordered list
//
ol.place-bracet {
  &> li:before {
    padding-right: 12px;
    counter-increment: post;
    content: counter(post) ")";
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.