<ol class="cp_clist">
	<li>css</li>
	<li>html</li>
	<li>copy</li>
	<li>easy</li>
</ol>

ol.cp_clist {
  padding: 0;
  counter-reset:cp_clist; /*数字をリセット*/
  list-style-type: none;
}
ol.cp_clist li {
  position: relative;
  padding-left: 50px;
  margin: 0;
}
ol.cp_clist li::before {
  position: absolute;
  top: 0;
  left: 0;
  /* カウントさせる */
  counter-increment: cp_clist;
  content: 'No.' counter(cp_clist) ' :';
}
ol.cp_clist li:nth-of-type(1)::before {
  color: #E91E63;
}
ol.cp_clist li:nth-of-type(2)::before {
  color: #4CAF50;
}
ol.cp_clist li:nth-of-type(3)::before {
  color: #FF9800;
}
ol.cp_clist li:nth-of-type(4)::before {
  color: #2196F3;
}