Propriedade List Marker Type
Última atualização: 2026-09-13
list-style-type Propriedade List Marker Type
list-style-type define o marcador à frente dos itens de lista, como ponto preenchido, círculo oco, número ou numeral romano. O padrão é disc. Ela suporta muitos marcadores predefinidos e strings personalizadas, sendo a propriedade mais usada para controlar a aparência visual de uma lista.
| Categoria | |
|---|---|
| Valor Inicial | disc |
| Herdado | Não |
| Aplica-se A | |
| Tipo de Animação | |
| Versão CSS | CSS1 |
| Status | Padrão |
📝 Sintaxe
list-style-type: none | disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | <string>;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
disc | circle | square | decimal | none | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | Palavra-chave | Tipos de marcador de lista |
▶ 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-type | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Suportado em todos os principais navegadores | |||||
Dica： list-style-type: none remove o marcador completamente, comumente usado em menus de navegação horizontais.
Aviso： Alguns tipos de marcador (como georgian e armenian) podem renderizar de forma inconsistente entre navegadores.
❓ Perguntas Frequentes
QQual é a diferença entre disc, circle e square?
Adisc é um ponto preenchido (o padrão para listas não ordenadas), circle é um círculo oco e square é um quadrado preenchido. Todos os três são usados em listas <ul> e renderizam levemente diferentes entre navegadores. disc é o mais comum, circle parece mais leve e square serve para listas enfatizadas. Se a fonte atual não tiver o glifo, o navegador recua para disc.
QComo personalizo marcadores de lista com emoji ou ícones?
ADuas formas: use um valor de string diretamente, list-style-type: "→ "; (suportado por navegadores modernos, inclusive emoji), ou a abordagem mais flexível: list-style: none mais li::before inserindo content: "✔", controlando cor, tamanho e espaçamento com CSS. A segunda é recomendada pelo controle e comportamento consistente entre navegadores.
QQuais são os valores numéricos comuns de marcador?
Adecimal (1, 2, 3), decimal-leading-zero (01, 02), lower-roman/upper-roman, lower-alpha/upper-alpha, georgian e armenian. Projetos chineses costumam usar decimal e lower-alpha; sumários costumam usar upper-roman.
QA semântica da lista permanece após list-style-type: none?
ASim. list-style-type: none só remove o marcador visível; a semântica listitem do <li> é preservada, e leitores de tela ainda reconhecem a estrutura da lista. Troque para outro elemento apenas quando o conteúdo não for mais uma lista. Remover marcadores em menus de nav nunca deve custar a semântica.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
Propriedade list-style
O shorthand para estilos de lista
Propriedade list-style-image
Use uma imagem como marcador da lista
