Formas Criativas de Estilizar Listas com CSS

Listas com o estilo padrão do navegador raramente correspondem a um design real. Seja construindo um menu de navegação, um tutorial passo a passo ou uma lista de recursos de produto, a estilização de listas com CSS oferece as ferramentas para torná-las intencionais. Este artigo aborda as técnicas mais práticas e baseadas em padrões—desde propriedades nativas de listas até contadores CSS e marcadores personalizados—sem sacrificar a acessibilidade.

Comece com o Tipo Correto de Lista HTML

Antes de tocar no CSS, escolha o elemento correto:

• <ul> — listas não ordenadas onde a sequência não importa (menus de navegação, listas de recursos)
• <ol> — listas ordenadas onde a sequência é significativa (instruções, classificações)
• <dl> — listas de descrição que emparelham termos com definições (glossários, metadados)

HTML semântico é importante aqui. Leitores de tela anunciam o tipo de lista e a contagem de itens, o que ajuda os usuários a entender o contexto antes de lerem um único item.

As Propriedades list-style-*: Seu Ponto de Partida

O atalho list-style agrupa três propriedades:

ul {
  list-style: square inside none;
  /* list-style-type | list-style-position | list-style-image */
}

list-style-position vale a pena ser compreendida claramente:

• outside (padrão) — o marcador fica na margem e o texto permanece bem alinhado
• inside — o marcador flui com o texto, causando quebra em itens de múltiplas linhas

list-style-image existe mas é limitada—você não pode redimensionar ou reposicionar a imagem. Para marcadores de imagem personalizados, um pseudo-elemento ::before com background-image oferece muito mais controle.

Estilizando Marcadores Nativos com CSS ::marker

O pseudo-elemento ::marker permite estilizar o marcador ou número integrado diretamente—sem marcação extra necessária:

li::marker {
  color: deeppink;
  font-size: 1.2em;
  font-weight: bold;
}

Limitação importante: ::marker suporta apenas um subconjunto específico de propriedades CSS: color, content, font-*, direction, unicode-bidi, white-space, text-combine-upright e propriedades de animação/transição. Você não pode aplicar display, background, padding, margin ou posicionamento. Trate-o como um gancho de estilização em nível de texto, não como um elemento completo.

O suporte de navegadores para ::marker é bom nos navegadores atuais, mas verifique sua matriz de navegadores alvo. Geralmente é a opção mais limpa para mudanças simples de cor ou fonte em marcadores nativos.

Marcadores de Lista Personalizados com ::before

Quando ::marker não é suficiente—para marcadores estilo ícone, alinhamento complexo ou transições—use ::before:

ul {
  list-style: none;
  padding-left: 0;
}

ul li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

ul li::before {
  content: "✓";
  color: green;
  flex-shrink: 0;
}

Nota de acessibilidade: Definir list-style: none pode fazer com que Safari/VoiceOver pare de expor o elemento como uma lista. Se a semântica de lista for significativa, adicione role="list" ao <ul> ou <ol>.

Contadores CSS para Listas Ordenadas Estilizadas

Contadores CSS oferecem controle total sobre a formatação de listas numeradas—útil para listas ordenadas estilizadas com prefixos, sufixos personalizados ou numeração multinível:

ol {
  list-style: none;
  counter-reset: steps;
}

ol li {
  counter-increment: steps;
}

ol li::before {
  content: "Passo " counter(steps) ". ";
  font-weight: bold;
  color: #333;
}

Contadores Aninhados

Para listas aninhadas, counters() (plural) exibe a hierarquia completa:

ol {
  list-style: none;
  counter-reset: steps;
}

ol li {
  counter-increment: steps;
}

ol li::before {
  content: counters(steps, ".") " ";
}
/* Saída: 1, 1.1, 1.2, 2, 2.1 */

A propriedade counter-increment também aceita um tamanho de passo: counter-increment: steps 2 incrementa de dois em dois.

Uma Nota sobre @counter-style

A regra-at @counter-style permite definir sistemas de contagem totalmente personalizados—símbolos personalizados, alfabetos ou padrões cíclicos:

@counter-style thumbs {
  system: cyclic;
  symbols: "👍" "👎";
  suffix: " ";
}

ul {
  list-style-type: thumbs;
}

Use com cautela. O suporte de navegadores para @counter-style permanece incompleto—notavelmente, o Safari adicionou suporte apenas na versão 17. Sempre teste em seus navegadores alvo e defina um fallback de list-style-type no mesmo elemento para garantir degradação elegante.

Escolhendo a Abordagem Correta

Conclusão

Uma boa estilização de listas CSS começa com HTML semântico e adiciona melhorias visuais por cima. Use ::marker para mudanças leves de cor e fonte, ::before quando precisar de controle de layout, e contadores CSS quando listas ordenadas precisarem de numeração personalizada. Evite remover a semântica de lista sem restaurá-la via ARIA. Cada técnica tem um caso de uso claro—escolha a que se adequa ao seu design sem complicá-lo demais.

Perguntas Frequentes

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..