KADUNEW

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

—

por

Kadu Oliveira
em

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

  1. This is the first item
  2. This is the second item
  3. This is the third item
  4. This is the fourth item
  5. This is the fifth item
  6. 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.

LinkedIn0
Google+0