Os navegadores da Web permitem que você personalize a aparência da maioria dos aspectos de uma página usando CSS. Mas alguns elementos tornam-se um pouco mais difícil de aplicarmos uma estilização. Uma dúvida seguida que vejo é de 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 fazer algo tão simples, como mudar a cor de fundo dos números na lista, as vezes podemos usar um código mais limpo e bonito.
Felizmente, através da combinação de um par de propriedades CSS menos conhecidos você pode adicionar números a suas listas. O truque é feitos 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.
Resultado final
- This is the first item
- This is the second item
- This is the third item
- This is the fourth item
- This is the fifth item
- This is the sixth item
Passo 1: Adicione um identificador para sua lista ordenada É uma boa prática para identificar cada lista que você deseja 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>
Passo 2: Temos que ter certeza de que o navegador não está adicionando seus números padrões. Logo devemos remover a numeração e o ponto padrão da sua lista. Aplicando a seguinte estilização você consegue fazer isso.
.custom-counter {
margin: 0;
padding: 0;
list-style-type: none;
}
Passo 3: Agora que removemos os marcadores padrão precisamos atribuir um nome para nosso contador e força-lo a aparecer novamente. Fizemos 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 na próxima etapa. Você pode usar qualquer nome aqui.
.custom-counter li {
counter-increment: num-list;
margin-bottom: 10px;
}
Passo 4: Use 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;
}
O pseudo-elemento ::before permite inserir conteúdo antes de um elemento. Neste caso, ele irá inserir o conteúdo antes de um item da lista. Você pode 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, igual ao exemplo que mostrei. Note que para a propriedade counter() foi passado o apelido do identificador que criamos na etapa anterior.
Neste tutorial eu quis mostrar uma maneira bem fácil e simples que você pode usar para personalizar a aparência dos números nas suas listas ordenadas.
Siga-me no Twitter: @kadunew ou assine nosso Feed e fique por dentro de todas atualizações aqui do blog.