Propriedade List Marker Image
Última atualização: 2026-09-13
list-style-image Propriedade List Marker Image
list-style-image substitui o marcador padrão (ponto, número etc.) por uma imagem personalizada nos itens de lista. O valor padrão none significa que nenhuma imagem é usada. É usada com frequência para dar às listas pequenos ícones de marca ou setas decorativas para um visual mais rico.
| Categoria | |
|---|---|
| Valor Inicial | none |
| Herdado | Não |
| Aplica-se A | |
| Tipo de Animação | |
| Versão CSS | CSS1 |
| Status | Padrão |
📝 Sintaxe
list-style-image: none | <image>;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
none | Palavra-chave | Nenhuma imagem |
<image> | Tipo | Imagem de marcador personalizada |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| list-style-image | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Suportado em todos os principais navegadores | |||||
Dica： list-style-image não controla o tamanho da imagem; para mais flexibilidade, use um pseudo-elemento ::before com background-image.
Aviso： Se a imagem falhar ao carregar, o marcador desaparece, então é prudente também definir list-style-type como fallback.
❓ Perguntas Frequentes
QQual é melhor, list-style-image ou um pseudo-elemento ::before?
A::before é mais flexível: controla tamanho, posição, espaçamento e alinhamento da imagem, e funciona com fontes de ícone. list-style-image é simples de usar, mas não escala a imagem nem ajusta o alinhamento. Use ::before com background-image e background-size quando precisar de controle preciso; use list-style-image para trocas rápidas de marcador.
QComo centralizo a imagem em list-style-image?
Alist-style-image em si não controla o alinhamento com precisão — a imagem é desenhada no seu tamanho intrínseco. Para centralizar exatamente, troque para li::before inserindo content: "" com background-image e background-position: center, dimensionando com background-size e centralizando/escalando conforme necessário.
QO que acontece quando o list-style-image falha ao carregar?
ASe a imagem falhar ao carregar (caminho errado, formato não suportado ou bloqueada), o marcador desaparece ou recua para nada, deixando os itens 'pelados'. Para evitar, mantenha list-style-type como backup, por exemplo list-style: disc url(bullet.png); — o disc aparece quando a imagem não está disponível.
QPor que não consigo redimensionar a imagem do list-style-image?
APorque a propriedade desenha a imagem no seu tamanho intrínseco na posição do marcador, e o CSS não oferece parâmetro para escalá-la ou recolori-la. Imagens muito grandes ou pequenas não se adaptam ao tamanho da fonte e ao layout. Para controle de tamanho, troque para li::before com background-image e background-size, ou use um ícone SVG inline e defina sua largura e altura.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
Propriedade list-style
O shorthand para estilos de lista
Pseudo-elemento ::before
Uma forma mais flexível de personalizar marcadores de lista
