Personalizar as “bolinhas” (bullets) de uma lista ordenada usando CSS

Você pode modificar ou remover aquelas “bolinhas” que aparecem em frente aos itens de uma lista ordenada.

Usaremos a tag list-style-type para fazer as mudanças.

Exemplo: Vamos trocar o marcador para um quadrado, ao invés do círculo:

  • Item 2
  • Item 2
  • Item 3

Aplicando ao seu site:

Criando a Lista:

<ul class="quadrado">
<li>Item 2</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

Criamos uma lista com a classe “quadrado”, mas você pode usar o nome que desejar.

Adicionando o estilo ao seu arquivo CSS:

ul.quadrado {list-style-type: square;}

Pronto! Sua lista agora irá exibir o marcador quadrado, ao invés do círculo.



Veja abaixo a lista com os itens para personalizar a tag list-type-style:

  • list-style-type:disc;
  • list-style-type:armenian;
  • list-style-type:circle;
  • list-style-type:cjk-ideographic;
  • list-style-type:decimal;
  • list-style-type:decimal-leading-zero;
  • list-style-type:georgian;
  • list-style-type:hebrew;
  • list-style-type:hiragana;
  • list-style-type:hiragana-iroha;
  • list-style-type:katakana;
  • list-style-type:katakana-iroha;
  • list-style-type:lower-alpha;
  • list-style-type:upper-alpha;
  • list-style-type:lower-greek;
  • list-style-type:lower-latin;
  • list-style-type:upper-latin;
  • list-style-type:lower-roman;
  • list-style-type:upper-roman;
  • list-style-type:none;
  • list-style-type:square;

Deixe sua Pergunta ou Comentário:

O seu endereço de email não será publicado Campos obrigatórios são marcados *

Por favor, digite os caracteres desta imagem na caixa de entrada

Por favor digite o código da imagem

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>