Cacher is the code snippet organizer for pro developers

ol{
  counter-reset:number;/* olごとに名前を付けたカウンターをリセット */
  list-style:none;/* もともとの数字を付けることをさせない */
  li{
      /* 装飾 */
    &:before{/* カウンタ（数字になる部分） */
      counter-increment: number;/* 任意の名前 */
      content: counter(number);/* 名前を付けたカウンターを呼び出し */
    }//before
  }//li
}//ol

//Ex. liにコンテンツがあってタイトルとかに付ける場合===================
ol{
  counter-reset:number;
  list-style:none;
  li{
    h3{
      &:before {			
        counter-increment:number;
        content: "No."counter(number);
        display: inline-block;
         background: #44cdff;		
        padding: 5px;
        border-radius: 6px;
        color:#fff;
        text-align: center;
        line-height: 15px;
      }//before	
    }//h3
  }//li
}//ul

<html>
<head>
<meta charset="utf-8">
</head>    
<body>
<div>
  <ol>
    <li>
      <h3>Title A</h3>
      <p>Text - - -</p>
    </li>
    <li>
      <h3>Title B</h3>
      <p>Text - - -</p>
    </li>
    <li>
      <h3>Title C</h3>
      <p>Text - - -</p>
    </li>
    <li>
      <h3>Title D</h3>
      <p>Text - - -</p>
    </li>
  </ol>
</div>
</body>
</html>