CSS to give a different color to the numbers in unordered lists

different_coloured_numbers_in_ordered_lists.scss

ol {
	counter-reset: li; /* Initiate a counter */
	margin-left: 0; /* Remove the default left margin */
	padding-left: 0; /* Remove the default left padding */
}
ol > li {
    position: relative; /* Create a positioning context */
    margin: 0 0 0 2em; /* Give each list item a left margin to make room for the numbers */
    padding: 0; /* Add some spacing around the content */
    list-style: none; /* Disable the normal item numbering */
}
ol > li:before {
    content: counter(li) ". "; /* Use the counter as content */
    counter-increment: li; /* Increment the counter by 1 */
    /* Position and style the number */
    position: absolute;
    top: -4px;
    left: -2em;
    @include box-sizing(border-box);
    width: 2em;
    margin-right: 8px;
    padding: 4px;
    color: #21a0de;
    text-align: center;
		font-weight: bold;
		&:after {
			content: ".";
		}
}