logo

Como remover marcadores em CSS?

Em alguns casos, somos obrigados a remover os marcadores de listas ordenadas e não ordenadas. A remoção dos marcadores da lista não é uma tarefa complexa usando CSS. Isso pode ser feito facilmente configurando o CSS estilo de lista ou tipo de estilo de lista propriedade para nenhum .

O tipo de estilo de lista A propriedade CSS é usada para definir o marcador (como um disco, caractere ou estilo de contador personalizado) de um lista elemento item. Esta propriedade CSS nos ajuda a criar a lista sem marcadores. Só pode ser aplicado aos elementos cujo valor de exibição está definido como item da lista. O tipo de estilo de lista propriedade é herdada, portanto pode ser aplicada ao elemento pai (como

    ou
      ) para aplicá-lo a todos os itens da lista.

      Por padrão, os itens da lista ordenada são numerados com algarismos arábicos (1, 2, 3, etc.) e os itens em uma lista não ordenada são marcados com marcadores redondos (•). O tipo de estilo de lista A propriedade CSS nos permite alterar o tipo de marcador de lista padrão para qualquer outro tipo, como quadrado, círculo, algarismos romanos, letras latinas e muito mais.

      Se definirmos seu valor como nenhum , ele removerá os marcadores/marcadores. Em vez de remover os marcadores de uma lista, podemos substituí-los pelas imagens. Isso torna o site visualmente mais atraente. Isso pode ser feito usando o imagem de estilo de lista propriedade.

      Vamos entender como remover marcadores usando um exemplo.

      Exemplo

      Neste exemplo, estamos usando listas ordenadas e não ordenadas e aplicando o tipo de estilo de lista imóvel com o valor nenhum para remover os marcadores dos itens da lista.

       ol { list-style-type: none; font-weight: bold; font-size: 20px; } ul { list-style-type: none; font-weight: bold; font-size: 20px; } <h2>Ordered list</h2> <ol> <li>List Item 1</li> <li>List Item 2</li> <li>List Item 3</li> </ol> <h2>Unordered list</h2> <ul> <li>List Item 1</li> <li>List Item 2</li> <li>List Item 3</li> </ul> 
      Teste agora

      Saída

      Como remover marcadores em CSS