Lista Ordenada com pseudo-elemento ::before, counter-increment e counter

Os navegadores Web permitem que se personalize a aparência da maioria dos aspectos de uma página usando CSS.
Mas alguns elementos tornam-se um pouco mais dificeis de aplicar um estilo. Uma dúvida comum que vejo é  como mudar o estilo do marcador em listas não ordenadas ou números em listas ordenadas.
Normalmente usamos list-style-type, list-style-image, e list-style-position. Mas para fazer algo tão simples, como mudar a cor de fundo dos números na lista, às vezes podemos usar um código mais limpo e bonito.

Felizmente, através da combinação de um par de propriedades CSS menos conhecidos pode-se adicionar números as listas. O truque é feito em duas etapas, basicamente:
primeiro escondemos os números padrões da marcação por completo, em seguida, usamos o ::before pseudo-elemento para adicionar os números de volta.

Passo 1: Adicione um identificador à lista ordenada é uma boa prática para identificar cada lista que se quer personalizar.

<ol class="custom-counter">
<li>This is the first item</li>
<li>This is the second item</li>
<li>This is the third item</li>
<li>This is the fourth item</li>
<li>This is the fifth item</li>
<li>This is the sixth item</li>
</ol>

HTML

Passo 2: Temos que ter a certeza que o browser não está a adicionar os números padrão. Assim devemos remover a numeração e o ponto padrão da lista. Aplicando a seguinte formatação consegue-se fazer isso.

.custom-counter {
margin: 0;
padding: 0;
list-style-type: none;
}

CSS
Passo 3: Agora que removemos os marcadores padrão precisamos atribuir um nome para o contador e forçá-lo a aparecer novamente. Fazemos isso através da propriedade counter-increment. No exemplo vou usar como valor dessa propriedade o nome num-list. Perceba que num-list não significa nada de especial, não é um valor CSS. É apenas um apelido que vamos usar. Podes usar qualquer nome nesta parte.

.custom-counter li {
counter-increment: num-list;
margin-bottom: 10px;
}

CSS

Passo 4: Usa o pseudo-elemento ::before para adicionar os números da lista e seus estilos antes do item da lista:

.custom-counter li::before {
content: counter(num-list);
margin-right: 5px;
font-size: 80%;
background-color: rgb(0,200,200);
color: white;
font-weight: bold;
padding: 3px 8px;
border-radius: 3px;
}

CSS

O pseudo-elemento ::before permite inserir conteúdo antes de um elemento. Neste caso, ele irá inserir o conteúdo antes do item da lista. Podes usar a propriedade content: para dizer ao navegador que o conteúdo deve ser colocado no início do elemento HTML. Podemos colocar palavras, caracteres ou algo gerado automaticamente pelo navegador. Nota que para a propriedade counter() foi passado o apelido do identificador que criamos no passo anterior.
Conhece outras técnicas em css para optimizar frontend como animar titulos em css.