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

ol.cp_clist {
	counter-reset:cp_clist;
	margin-left: 1em;
}
ol.cp_clist li {
	position: relative;
	padding-left: 3em;
	list-style-type: none;
}
ol.cp_clist li::before {
	counter-increment: cp_clist;
	content: 'No.' counter(cp_clist) ' :';
	display: block;
	position: absolute;
	top: 0.1em;
	left: -1em;
	font-weight: bold;
}
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;
}