{"id":125143,"date":"2025-03-03T08:22:30","date_gmt":"2025-03-03T06:22:30","guid":{"rendered":"https:\/\/elementor.com\/blog\/como-remover-marcadores-em-css-li-ol-lista-nao-ordenada-sem-marcadores\/"},"modified":"2025-11-17T00:31:04","modified_gmt":"2025-11-16T22:31:04","slug":"como-remover-marcadores-em-css-li-ol-lista-nao-ordenada-sem-marcadores","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/pt-br\/como-remover-marcadores-em-css-li-ol-lista-nao-ordenada-sem-marcadores\/","title":{"rendered":"Como Remover Marcadores em CSS? (li  ol) Lista N\u00e3o Ordenada Sem Marcadores"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"125143\" class=\"elementor elementor-125143 elementor-1308\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-32fe359 e-flex e-con-boxed e-con e-parent\" data-id=\"32fe359\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-688f6f2 elementor-widget elementor-widget-text-editor\" data-id=\"688f6f2\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Neste guia abrangente, mergulharemos no universo da customiza\u00e7\u00e3o de listas em CSS. Para usu\u00e1rios de WordPress, demonstraremos como o Elementor, o popular construtor de websites, simplifica esse processo, capacitando-o a alcan\u00e7ar sua vis\u00e3o de design sem necessitar de conhecimentos extensivos em codifica\u00e7\u00e3o.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Fundamentos da Estiliza\u00e7\u00e3o de Listas em CSS<\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Introdu\u00e7\u00e3o \u00e0s tags  &lt;ul&gt;,  &lt;ol&gt;, e  &lt;li&gt;  Tags<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">As listas s\u00e3o um alicerce fundamental do design de websites. Elas auxiliam na organiza\u00e7\u00e3o de informa\u00e7\u00f5es de maneira clara e estruturada, tornando seu website mais f\u00e1cil de ler e compreender. O HTML nos fornece tr\u00eas tags essenciais para criar listas:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>&lt;ul&gt;:<\/b><span style=\"font-weight: 400;\">  Significa &#8220;unordered list&#8221; (lista n\u00e3o ordenada). Esta \u00e9 sua op\u00e7\u00e3o padr\u00e3o para listas com marcadores onde a ordem dos itens n\u00e3o possui import\u00e2ncia espec\u00edfica.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>&lt;ol&gt;:<\/b><span style=\"font-weight: 400;\">  Significa &#8220;ordered list&#8221; (lista ordenada). Utilize esta quando necessitar exibir itens em uma sequ\u00eancia numerada.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>&lt;li&gt;:<\/b><span style=\"font-weight: 400;\">  Significa &#8220;list item&#8221; (item de lista). Cada item, seja um marcador ou um elemento numerado, \u00e9 envolvido por tags &lt;li&gt;.<\/span><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Exemplo de Estrutura HTML<\/span><\/h4>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bd12913 elementor-widget elementor-widget-code-highlight\" data-id=\"bd12913\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp>HTML\r\n<ul>\r\n  <li>Coffee<\/li>\r\n  <li>Tea<\/li>\r\n  <li>Milk<\/li>\r\n<\/ul>\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9540e83 elementor-widget elementor-widget-text-editor\" data-id=\"9540e83\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Este c\u00f3digo simples criaria uma lista n\u00e3o ordenada b\u00e1sica com tr\u00eas marcadores (\u2022 Caf\u00e9, \u2022 Ch\u00e1, \u2022 Leite).<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">A Propriedade list-style-type<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">CSS (Cascading Style Sheets) \u00e9 a linguagem que controla a apresenta\u00e7\u00e3o visual de seu website. A propriedade list-style-type \u00e9 sua ferramenta principal para personalizar como esses marcadores ou n\u00fameros aparecem em suas listas. Aqui est\u00e3o alguns dos valores mais comuns que voc\u00ea utilizar\u00e1:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>disc:<\/b><span style=\"font-weight: 400;\"> O estilo padr\u00e3o exibe c\u00edrculos preenchidos como marcadores.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>circle:<\/b><span style=\"font-weight: 400;\"> Cria c\u00edrculos vazios como marcadores.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>square:<\/b><span style=\"font-weight: 400;\"> Renderiza marcadores quadrados.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>nenhum:<\/b><span style=\"font-weight: 400;\">  A palavra m\u00e1gica! Este valor remove completamente os marcadores ou n\u00fameros.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Vejamos como isso funciona em um exemplo simples de <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/what-is-css\/\"   title=\"What Is CSS? How to Use it in Web Design (2025)\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"19693\">CSS<\/a>:<\/span><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-af93b55 elementor-widget elementor-widget-code-highlight\" data-id=\"af93b55\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nul {\r\n  list-style-type: none; \r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-98cb022 elementor-widget elementor-widget-text-editor\" data-id=\"98cb022\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Este trecho removeria os marcadores de TODAS as listas n\u00e3o ordenadas (&lt;ul&gt;) em seu website.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Direcionando Listas Espec\u00edficas<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Embora estilizar todas as suas listas da mesma maneira possa ser \u00fatil, frequentemente voc\u00ea desejar\u00e1 personalizar marcadores (ou sua aus\u00eancia) em um n\u00edvel mais granular. \u00c9 aqui que as classes e IDs do CSS se tornam \u00fateis.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Utilizando Classes<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">As classes permitem que voc\u00ea aplique estilos a m\u00faltiplas listas em seu website. Aqui est\u00e1 como:<\/span><\/p>\n<h5><span style=\"font-weight: 400;\">Adicione uma classe ao seu HTML<\/span><\/h5>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d08e7c3 elementor-widget elementor-widget-code-highlight\" data-id=\"d08e7c3\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp>HTML\r\n<ul class=\"no-bullets\">\r\n  <li>Item One<\/li>\r\n  <li>Item Two<\/li>\r\n<\/ul>\r\n\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3d06916 elementor-widget elementor-widget-text-editor\" data-id=\"3d06916\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h5><span style=\"font-weight: 400;\">Estilize a classe em seu CSS<\/span><\/h5>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-098c433 elementor-widget elementor-widget-code-highlight\" data-id=\"098c433\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\n.no-bullets {\r\n  list-style-type: none; \r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fa8a1bb elementor-widget elementor-widget-text-editor\" data-id=\"fa8a1bb\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Agora, apenas as listas com a classe no-bullets ter\u00e3o seus marcadores removidos.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Utilizando IDs<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Os IDs direcionam uma lista espec\u00edfica em seu website. Utilize-os quando necessitar de estiliza\u00e7\u00e3o \u00fanica para uma \u00fanica lista.<\/span><\/p>\n<h5><span style=\"font-weight: 400;\">Adicione um ID ao seu HTML<\/span><\/h5>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1c13c82 elementor-widget elementor-widget-code-highlight\" data-id=\"1c13c82\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp>HTML\r\n<ul id=\"special-list\">\r\n  <li>Item One<\/li>\r\n  <li>Item Two<\/li>\r\n<\/ul>\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d85b657 elementor-widget elementor-widget-text-editor\" data-id=\"d85b657\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h5><span style=\"font-weight: 400;\">Estilize o ID em seu CSS (observe o s\u00edmbolo #)<\/span><\/h5>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d86aac9 elementor-widget elementor-widget-code-highlight\" data-id=\"d86aac9\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\n#special-list {\r\n  list-style-type: square; \r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dfa31bf elementor-widget elementor-widget-text-editor\" data-id=\"dfa31bf\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h4><span style=\"font-weight: 400;\">Pontos-chave a lembrar<\/span><\/h4>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Classes (indicadas por .) s\u00e3o para estilizar m\u00faltiplos elementos.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">IDs (indicados por #) s\u00e3o utilizados para estilizar um elemento \u00fanico.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Voc\u00ea pode combinar o uso de classes e IDs para m\u00e1xima flexibilidade de estiliza\u00e7\u00e3o.<\/span><\/li>\n<\/ol>\n<h2><span style=\"font-weight: 400;\">Removendo Marcadores com o Elementor <\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">O Poder do Editor Visual do Elementor<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Se a ideia de escrever c\u00f3digo CSS parece intimidadora, o Elementor tem a solu\u00e7\u00e3o! Sua interface visual intuitiva permite que voc\u00ea estilize listas, incluindo a remo\u00e7\u00e3o de marcadores, com apenas alguns cliques. Eis a beleza do Elementor:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Personaliza\u00e7\u00e3o sem c\u00f3digo:<\/b><span style=\"font-weight: 400;\"> Voc\u00ea n\u00e3o precisa ser um especialista em CSS para alcan\u00e7ar resultados de apar\u00eancia profissional.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Visualiza\u00e7\u00f5es em tempo real:<\/b><span style=\"font-weight: 400;\"> Veja suas altera\u00e7\u00f5es refletidas na p\u00e1gina em tempo real, tornando os ajustes de design extremamente simples.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">Interface de arrastar e soltar:<\/ci><ci id=\"gid_1\"> A constru\u00e7\u00e3o do seu website torna-se natural e intuitiva.<\/ci><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">Guia Passo a Passo<\/span><\/h3>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">Localize o Widget de Lista:<\/ci><ci id=\"gid_1\"> Dentro do editor do Elementor, arraste e solte o widget &#8216;Lista&#8217; em sua p\u00e1gina ou edite uma lista existente.<\/ci><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Abra os Controles de Estiliza\u00e7\u00e3o:<\/b><span style=\"font-weight: 400;\">  No painel \u00e0 esquerda, voc\u00ea ver\u00e1 um conjunto de abas de estiliza\u00e7\u00e3o. Clique na aba &#8216;Estilo&#8217;.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">Encontre list-style-type:<\/ci><ci id=\"gid_1\"> Na se\u00e7\u00e3o &#8216;Tipografia&#8217;, voc\u00ea ver\u00e1 uma op\u00e7\u00e3o para &#8216;Tipo de Estilo de Lista&#8217;.<\/ci><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">Defina como &#8216;Nenhum&#8217;:<\/ci><ci id=\"gid_1\"> Clique no menu suspenso e selecione a op\u00e7\u00e3o &#8216;Nenhum&#8217;.<\/ci><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">\u00c9 isso! Seus marcadores desaparecer\u00e3o magicamente. Voc\u00ea pode utilizar a mesma interface para explorar outras op\u00e7\u00f5es de estiliza\u00e7\u00e3o, como alterar a cor ou o tamanho de listas numeradas.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Personaliza\u00e7\u00e3o Avan\u00e7ada no Elementor<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">A lista de op\u00e7\u00f5es de estiliza\u00e7\u00e3o do Elementor vai al\u00e9m do b\u00e1sico. Voc\u00ea pode explorar recursos como:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">Imagens de marcadores personalizados:<\/ci><ci id=\"gid_1\"> Abordaremos isso em uma se\u00e7\u00e3o posterior.<\/ci><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">Ajuste de espa\u00e7amento e recuo:<\/ci><ci id=\"gid_1\"> Para um controle preciso sobre a apar\u00eancia da lista.<\/ci><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">Estiliza\u00e7\u00e3o de itens individuais da lista:<\/ci><ci id=\"gid_1\"> Crie designs \u00fanicos dentro de uma \u00fanica lista.<\/ci><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Se voc\u00ea deseja explorar marcadores personalizados ou t\u00e9cnicas de lista verdadeiramente avan\u00e7adas, a documenta\u00e7\u00e3o e a comunidade do Elementor fornecem tutoriais \u00fateis e exemplos de c\u00f3digo para expandir suas habilidades.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Dominando CSS para Controle Total<\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Entendendo a Heran\u00e7a<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">O CSS possui uma natureza hier\u00e1rquica, o que significa que os estilos aplicados aos elementos pais podem se propagar e afetar seus filhos aninhados. Este conceito \u00e9 importante com listas:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Listas Parentais:<\/b><span style=\"font-weight: 400;\">  Quando voc\u00ea estiliza uma tag  &lt;ul&gt;  ou  &lt;ol&gt; , esses estilos frequentemente s\u00e3o transferidos para os itens individuais da lista (&lt;li&gt;) dentro dela.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">Sobrescrevendo Estilos:<\/ci><ci id=\"gid_1\"> Para estilizar n\u00edveis espec\u00edficos de lista de maneira diferente, voc\u00ea precisar\u00e1 usar seletores CSS mais precisos.<\/ci><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">Exemplo:<\/span><\/h3>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ba5bad0 elementor-widget elementor-widget-code-highlight\" data-id=\"ba5bad0\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nul {\r\n  list-style-type: square; \/* All lists will have square bullets *\/\r\n}\r\n\r\nul ul { \r\n  list-style-type: circle; \/* Nested lists will have circle bullets *\/\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d2b046c elementor-widget elementor-widget-text-editor\" data-id=\"d2b046c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><ci id=\"gid_0\">Neste cen\u00e1rio, as listas de n\u00edvel superior teriam marcadores quadrados, mas quaisquer listas aninhadas <\/ci><ci id=\"gid_1\"><ci id=\"gid_2\">dentro<\/ci><\/ci><ci id=\"gid_3\"> dessas listas mudariam para marcadores circulares.<\/ci><\/p>\n<h3><span style=\"font-weight: 400;\">A Abrevia\u00e7\u00e3o list-style<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Para um CSS eficiente, voc\u00ea pode combinar v\u00e1rias propriedades relacionadas a listas em uma \u00fanica declara\u00e7\u00e3o usando a abrevia\u00e7\u00e3o list-style. Funciona assim:<\/span><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-797e86a elementor-widget elementor-widget-code-highlight\" data-id=\"797e86a\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nul {\r\n  list-style: disc inside;\r\n}\r\nThis is equivalent to:\r\nCSS\r\nul {\r\n  list-style-type: disc; \r\n  list-style-position: inside; \r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f3ebe0e elementor-widget elementor-widget-text-editor\" data-id=\"f3ebe0e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Vamos detalhar:<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">List-style-type<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">J\u00e1 abordamos isso! Define o estilo do marcador\/n\u00famero (por exemplo, disco, quadrado, nenhum).<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">List-style-position<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Controla onde o marcador se posiciona em rela\u00e7\u00e3o ao texto.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Inside, coloca o marcador dentro do fluxo de conte\u00fado do item da lista.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Outside posiciona o marcador fora do fluxo de conte\u00fado regular, criando mais espa\u00e7o.<\/span><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">Substituindo Marcadores por Imagens Personalizadas<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">A propriedade list-style-image abre um mundo de possibilidades visuais para suas listas. Veja como trocar marcadores mon\u00f3tonos por gr\u00e1ficos chamativos:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Escolha Sua Imagem:<\/b><span style=\"font-weight: 400;\">  Encontre ou crie uma pequena imagem que se adeque ao seu estilo de design. \u00cdcones, setas ou formas simples funcionam bem. Tenha em mente o tamanho do arquivo para otimizar a velocidade de carregamento da p\u00e1gina.<\/span><\/li>\n<\/ol>\n<p><ci id=\"gid_0\">Utilize a Propriedade list-style-image:<\/ci><ci id=\"gid_1\"> Adicione esta declara\u00e7\u00e3o \u00e0 sua regra CSS:<\/ci><span style=\"font-weight: 400;\"><br \/><\/span><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-57531f2 elementor-widget elementor-widget-code-highlight\" data-id=\"57531f2\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp> CSS\r\nul {\r\n  list-style-image: url('path\/to\/your\/image.png'); \r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9852b75 elementor-widget elementor-widget-text-editor\" data-id=\"9852b75\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Substitua &#8216;caminho\/para\/sua\/imagem.png&#8217; pelo caminho real do arquivo ou URL da web da imagem escolhida.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Dimensionamento e Posicionamento de Imagens<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Provavelmente voc\u00ea deseja algum controle sobre como suas imagens personalizadas aparecem. Experimente estas propriedades adicionais:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">List-style-position: <\/ci><ci id=\"gid_1\">Discutimos isso anteriormente, mas<\/ci> <ci id=\"gid_2\">inside ou outside influenciar\u00e3o o posicionamento da imagem.<\/ci><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">Propriedades de fundo:<\/ci><ci id=\"gid_1\"> Se voc\u00ea precisar de um posicionamento mais intrincado, trate a imagem como um plano de fundo usando background-size, background-repeat e background-position.<\/ci><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Exemplo<\/span><\/h4>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-983bc38 elementor-widget elementor-widget-code-highlight\" data-id=\"983bc38\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nul {\r\n  list-style-image: url('checkmark.svg'); \r\n  list-style-position: inside;\r\n  background-repeat: no-repeat; \/* Prevent the image from tiling *\/\r\n  background-position: 0 50%;   \/* Position the image in the center *\/\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6eddf24 elementor-widget elementor-widget-text-editor\" data-id=\"6eddf24\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b>Nota Importante:<\/b><span style=\"font-weight: 400;\">  Sempre forne\u00e7a uma op\u00e7\u00e3o alternativa usando list-style-type caso a imagem n\u00e3o carregue. Isso garante que sua lista ainda exiba algo visualmente significativo.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Dicas de Solu\u00e7\u00e3o de Problemas<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Mesmo com CSS cuidadoso, \u00e0s vezes ocorrem imprevistos, e seus marcadores podem n\u00e3o cooperar. Aqui est\u00e1 um conjunto de ferramentas de solu\u00e7\u00e3o de problemas para ter em mente:<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Inconsist\u00eancias entre Navegadores<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Pequenas diferen\u00e7as de renderiza\u00e7\u00e3o entre navegadores web (Chrome, Firefox, Safari, etc.) podem ocorrer. Teste seu website em v\u00e1rios navegadores para detectar qualquer comportamento estil\u00edstico estranho.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Estilos Conflitantes<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Caso o senhor possua m\u00faltiplos arquivos CSS ou folhas de estilo, \u00e9 poss\u00edvel que haja sobreposi\u00e7\u00f5es indesejadas. Recomenda-se que o senhor utilize as ferramentas de desenvolvedor do seu navegador (geralmente acessadas clicando com o bot\u00e3o direito do mouse e selecionando &#8220;Inspecionar&#8221;) para examinar quais estilos est\u00e3o efetivamente sendo aplicados \u00e0s suas listas.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Especificidade:<\/b><span style=\"font-weight: 400;\">  Seletores CSS mais espec\u00edficos t\u00eam preced\u00eancia. Assegure-se de que suas regras de estiliza\u00e7\u00e3o de marcadores direcionem as listas corretas com especificidade suficiente para sobrescrever quaisquer padr\u00f5es.<\/span><\/li>\n<\/ul>\n<p><b>Advert\u00eancia sobre !important:<\/b><span style=\"font-weight: 400;\">  Embora a declara\u00e7\u00e3o !important possa for\u00e7ar a sobreposi\u00e7\u00e3o de estilos, recomenda-se utiliz\u00e1-la com parcim\u00f4nia. Seu uso pode tornar seu CSS mais dif\u00edcil de manter a longo prazo.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Cen\u00e1rios Comuns<\/span><\/h3>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Reaparecimento de Marcadores:<\/b><span style=\"font-weight: 400;\">  Verifique se algum estilo de lista pai est\u00e1 causando problemas de heran\u00e7a. Ajuste seu CSS para direcionar especificamente as listas que deseja modificar.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Imagens N\u00e3o Aparecendo:<\/b><span style=\"font-weight: 400;\">  Verifique minuciosamente seus caminhos de arquivo! Um \u00fanico caractere incorreto pode quebrar o link. Al\u00e9m disso, considere o cache do navegador \u2013 ocasionalmente, uma atualiza\u00e7\u00e3o for\u00e7ada (Ctrl+F5 ou Cmd+Shift+R) \u00e9 necess\u00e1ria para for\u00e7ar o carregamento da imagem.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Posicionamento Inesperado:<\/b><span style=\"font-weight: 400;\"> Certifique-se de que suas propriedades list-style-position e background adicionais trabalhem em harmonia para posicionar suas imagens conforme desejado.<\/span><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">As ferramentas de desenvolvedor s\u00e3o suas melhores aliadas ao depurar problemas de CSS. Aprenda a utiliz\u00e1-las eficazmente, e o senhor resolver\u00e1 enigmas de estiliza\u00e7\u00e3o com facilidade!<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Al\u00e9m da Remo\u00e7\u00e3o de Marcadores: Estiliza\u00e7\u00e3o Criativa de Listas<\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Listas Horizontais<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Em determinadas circunst\u00e2ncias, \u00e9 recomend\u00e1vel romper com o formato tradicional de lista vertical e dispor seus itens horizontalmente. As t\u00e9cnicas de CSS flexbox e inline-block oferecem solu\u00e7\u00f5es excelentes:<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">M\u00e9todo CSS Flexbox<\/span><\/h4>\n<p><b>Envolva Sua Lista:<\/b><span style=\"font-weight: 400;\">  Encapsule seu  &lt;ul&gt;  ou  &lt;ol&gt;  em um elemento cont\u00eainer (geralmente um  &lt;div&gt;).<\/span><\/p>\n<h5><span style=\"font-weight: 400;\">Aplique Propriedades Flexbox<\/span><\/h5>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ee1e19e elementor-widget elementor-widget-code-highlight\" data-id=\"ee1e19e\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\n.horizontal-list-container {\r\n  display: flex; \/* Activate flexbox layout *\/\r\n  flex-direction: row; \/* Arrange items in a row *\/\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6662cad elementor-widget elementor-widget-text-editor\" data-id=\"6662cad\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h4><span style=\"font-weight: 400;\">M\u00e9todo Inline-Block<\/span><\/h4>\n<h5><span style=\"font-weight: 400;\">Direcione Itens da Lista<\/span><\/h5>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-35bb678 elementor-widget elementor-widget-code-highlight\" data-id=\"35bb678\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp> CSS\r\nul li {\r\n  display: inline-block; \r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6338180 elementor-widget elementor-widget-text-editor\" data-id=\"6338180\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b>Importante!<\/b><span style=\"font-weight: 400;\">  Com ambos os m\u00e9todos, \u00e9 prov\u00e1vel que o senhor precise ajustar margens e preenchimentos para refinar o espa\u00e7amento entre seus itens de lista horizontal.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Ajustando Margens, Preenchimentos e Recuos<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Vamos exercer controle sobre o espa\u00e7amento ao redor de seus itens de lista para obter um visual refinado:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Margens:<\/b><span style=\"font-weight: 400;\"> As margens criam espa\u00e7o <\/span><i><span style=\"font-weight: 400;\">externamente<\/span><\/i><span style=\"font-weight: 400;\">  \u00e0 borda de um elemento. Utilize propriedades como margin-top, margin-right, etc., para controlar o espa\u00e7amento entre itens de lista ou entre a lista inteira e o conte\u00fado circundante.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Preenchimento:<\/b><span style=\"font-weight: 400;\"> O preenchimento cria espa\u00e7o <\/span><i><span style=\"font-weight: 400;\">internamente<\/span><\/i><span style=\"font-weight: 400;\">  \u00e0 borda de um elemento. Utilize a propriedade padding para adicionar espa\u00e7o respirat\u00f3rio ao redor do conte\u00fado textual de cada item da lista.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Recuo de Texto:<\/b><span style=\"font-weight: 400;\">  Empregue a propriedade text-indent para ajustar com precis\u00e3o onde o texto do item da lista come\u00e7a. Um valor negativo pode deslocar o texto para longe do marcador, criando maior separa\u00e7\u00e3o visual.<\/span><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Exemplo<\/span><\/h4>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fd8566b elementor-widget elementor-widget-code-highlight\" data-id=\"fd8566b\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nul li {\r\n  margin-right: 20px; \/* Space between list items *\/\r\n  padding: 10px; \/* Internal spacing for visual comfort *\/\r\n  text-indent: -5px; \/* Shift text slightly to the right *\/\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cabb749 elementor-widget elementor-widget-text-editor\" data-id=\"cabb749\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3><span style=\"font-weight: 400;\">Melhores Pr\u00e1ticas de Acessibilidade<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Ao aprimorar visualmente suas listas, \u00e9 fundamental considerar os usu\u00e1rios com defici\u00eancias. Eis no que focar:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>HTML Sem\u00e2ntico:<\/b><span style=\"font-weight: 400;\">  A utiliza\u00e7\u00e3o correta das tags  &lt;ul&gt;,  &lt;ol&gt;, e  &lt;li&gt;  informa \u00e0s tecnologias assistivas (como leitores de tela) que est\u00e3o lidando com uma lista. Essa informa\u00e7\u00e3o estrutural \u00e9 inestim\u00e1vel para a navega\u00e7\u00e3o e compreens\u00e3o do seu conte\u00fado.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Abstenha-se de Depender Exclusivamente de Pistas Visuais:<\/b><span style=\"font-weight: 400;\">  Caso o senhor remova os marcadores, assegure-se de que haja distin\u00e7\u00e3o visual suficiente entre os itens da lista. Espa\u00e7amento adequado, altera\u00e7\u00f5es de fonte ou bordas podem ser \u00fateis para aqueles que possam ter dificuldade em perceber a estiliza\u00e7\u00e3o padr\u00e3o.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Teste com Leitores de Tela:<\/b><span style=\"font-weight: 400;\"> Experimente softwares de leitura de tela (como NVDA ou VoiceOver) para obter uma experi\u00eancia direta de como suas listas s\u00e3o apresentadas a usu\u00e1rios com defici\u00eancias visuais.<\/span><\/li>\n<\/ol>\n<h3><span style=\"font-weight: 400;\">Quando N\u00c3O Remover Marcadores<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Existem situa\u00e7\u00f5es em que marcadores ou n\u00fameros tradicionais servem a um prop\u00f3sito claro:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Clareza e Escaneabilidade:<\/b><span style=\"font-weight: 400;\"> Para listas simples onde a ordem n\u00e3o \u00e9 relevante (por exemplo, listas de ingredientes, listas de caracter\u00edsticas), utilize marcadores para auxiliar na an\u00e1lise visual r\u00e1pida das informa\u00e7\u00f5es.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Priorizando a Ordem:<\/b><span style=\"font-weight: 400;\"> Listas ordenadas s\u00e3o essenciais para instru\u00e7\u00f5es, etapas ou classifica\u00e7\u00f5es onde a sequ\u00eancia \u00e9 importante.<\/span><\/li>\n<\/ol>\n<h3><span style=\"font-weight: 400;\">Estilizando Menus de Navega\u00e7\u00e3o<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">As listas constituem a estrutura fundamental de diversos menus de navega\u00e7\u00e3o de websites. Vamos explorar alguns casos de uso comuns:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">Navega\u00e7\u00e3o de N\u00edvel Superior:<\/ci><ci id=\"gid_1\"> Frequentemente estilizada como listas horizontais para as se\u00e7\u00f5es principais do site.<\/ci><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">Menus Suspensos:<\/ci><ci id=\"gid_1\"> Utilizam listas aninhadas para revelar subcategorias ao passar o mouse ou clicar em um item de n\u00edvel superior.<\/ci><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">Menus M\u00f3veis:<\/ci><ci id=\"gid_1\"> A estiliza\u00e7\u00e3o criativa de listas pode alimentar a navega\u00e7\u00e3o responsiva que se recolhe em um menu &#8220;hamb\u00farguer&#8221; em telas menores.<\/ci><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">O Elementor simplifica a cria\u00e7\u00e3o de menus de navega\u00e7\u00e3o acess\u00edveis e belamente projetados com in\u00fameras op\u00e7\u00f5es de personaliza\u00e7\u00e3o.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Dicas de Design e Inspira\u00e7\u00e3o <\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Exemplos Visuais<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Uma imagem vale mais que mil palavras, ent\u00e3o vamos incluir alguns exemplos visuais ao longo desta se\u00e7\u00e3o. Estes poderiam ser capturas de tela ou imagens incorporadas exibindo:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Designs criativos de marcadores personalizados<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Layouts de lista horizontal<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Estiliza\u00e7\u00e3o \u00fanica de lista utilizada em websites do mundo real<\/span><\/li>\n<\/ol>\n<h3><span style=\"font-weight: 400;\">Tend\u00eancias de Design<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Incorporar tend\u00eancias atuais de design web pode dar \u00e0s suas listas uma sensa\u00e7\u00e3o fresca e moderna. Considere explorar:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">Minimalismo:<\/ci><ci id=\"gid_1\"> Linhas limpas, amplo espa\u00e7o em branco e estiliza\u00e7\u00e3o de lista para um visual sofisticado.<\/ci><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">Tipografia Ousada:<\/ci><ci id=\"gid_1\"> Utiliza\u00e7\u00e3o de fontes fortes e tamanhos contrastantes para fazer sua lista de itens se destacar.<\/ci><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">Micro-intera\u00e7\u00f5es:<\/ci><ci id=\"gid_1\"> Adi\u00e7\u00e3o de anima\u00e7\u00f5es ao passar o mouse ou clicar para aprimorar o engajamento do usu\u00e1rio com suas listas.<\/ci><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">Cores e Indicadores Visuais:<\/ci><ci id=\"gid_1\"> Utilize psicologia das cores ou separadores visuais para guiar o olhar do usu\u00e1rio e diferenciar itens da lista.<\/ci><\/li>\n<\/ol>\n<h3><span style=\"font-weight: 400;\">Utilizando Listas para Hierarquia Visual<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Listas n\u00e3o s\u00e3o apenas para marcadores e listas de compras! Elas podem estruturar seu conte\u00fado eficazmente:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">T\u00edtulos e Subt\u00edtulos:<\/ci><ci id=\"gid_1\"> Trate os t\u00edtulos como listas utilizando diferentes n\u00edveis (<cx id=\"gid_2\"><\/cx>h1<cx id=\"gid_3\"><\/cx>, <cx id=\"gid_4\"><\/cx>h2<cx id=\"gid_5\"><\/cx>, etc.) para uma organiza\u00e7\u00e3o clara do conte\u00fado.<\/ci><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">Barras Laterais e Destaques:<\/ci><ci id=\"gid_1\"> Estilize listas para criar se\u00e7\u00f5es de conte\u00fado visualmente distintas que chamem a aten\u00e7\u00e3o.<\/ci><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">Caracter\u00edsticas do Produto:<\/ci><ci id=\"gid_1\"> Apresente benef\u00edcios ou especifica\u00e7\u00f5es do produto em um formato de lista estruturado e f\u00e1cil de ler.<\/ci><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">Construtor de Temas e Kits de Design do Elementor<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">As poderosas ferramentas do Elementor tornam a explora\u00e7\u00e3o de design uma tarefa simples:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">Construtor de Temas:<\/ci><ci id=\"gid_1\"> Permite que voc\u00ea personalize cada aspecto do seu website, incluindo como as listas s\u00e3o estilizadas em p\u00e1ginas de arquivo, posts de blog e muito mais.<\/ci><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Kits de Design:<\/b><span style=\"font-weight: 400;\">  Obtenha um ponto de partida com modelos pr\u00e9-projetados do Elementor e kits de website. Muitos incluem estilos de lista \u00fanicos que voc\u00ea pode adaptar e tornar seus.<\/span><\/li>\n<\/ul>\n<h2><span style=\"font-weight: 400;\">Aprimorando Seu Website WordPress com o Elementor<\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Benef\u00edcios do Elementor para WordPress<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Ao longo deste guia, vimos como o Elementor simplifica a remo\u00e7\u00e3o de marcadores e desbloqueia in\u00fameras possibilidades de design de lista. Mas seus benef\u00edcios se estendem muito al\u00e9m da estiliza\u00e7\u00e3o de listas:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">Facilidade de Uso:<\/ci><ci id=\"gid_1\"> A interface de arrastar e soltar e a visualiza\u00e7\u00e3o em tempo real tornam o design web acess\u00edvel a todos, independentemente da experi\u00eancia em codifica\u00e7\u00e3o.<\/ci><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">Profundidade de Design:<\/ci><ci id=\"gid_1\"> O Elementor oferece controle minucioso para aqueles que se sentem confort\u00e1veis com CSS, permitindo elementos de website verdadeiramente \u00fanicos e personalizados.<\/ci><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">Velocidade e Desempenho:<\/ci><ci id=\"gid_1\"> O c\u00f3digo do Elementor \u00e9 otimizado para carregamento r\u00e1pido, e quando combinado com o Elementor Hosting, voc\u00ea alcan\u00e7a um desempenho imbat\u00edvel.<\/ci><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">Comunidade Pr\u00f3spera:<\/ci><ci id=\"gid_1\"> Acesse uma vasta biblioteca de tutoriais, f\u00f3runs support e complementos de terceiros para o Elementor, estendendo ainda mais sua funcionalidade.<\/ci><\/li>\n<\/ol>\n<h2><span style=\"font-weight: 400;\">Conclus\u00e3o <\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Neste guia, abordamos:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Os fundamentos da estiliza\u00e7\u00e3o de lista CSS, controlando marcadores (ou sua aus\u00eancia!), e heran\u00e7a.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Como o Elementor coloca voc\u00ea no assento do motorista do design com personaliza\u00e7\u00e3o sem c\u00f3digo.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">T\u00e9cnicas avan\u00e7adas de CSS para substituir marcadores por imagens personalizadas e ajustar o espa\u00e7amento.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">A import\u00e2ncia da acessibilidade e das melhores pr\u00e1ticas de design.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">As vantagens de desempenho do Elementor Hosting e suas otimiza\u00e7\u00f5es integradas.<\/span><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">Seja voc\u00ea um iniciante ou um designer web experiente, o Elementor capacita voc\u00ea a criar listas visualmente atraentes e bem estruturadas que aprimoram a experi\u00eancia do seu website. Combinado com o Elementor Hosting, voc\u00ea desfrutar\u00e1 de tempos de carregamento extremamente r\u00e1pidos que aumentam a satisfa\u00e7\u00e3o do usu\u00e1rio e a visibilidade nos mecanismos de busca.<\/span><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Marcadores e listas numeradas \u2013 esses elementos aparentemente simples \u2013 desempenham um papel surpreendentemente importante no design de websites. Eles organizam informa\u00e7\u00f5es, direcionam o olhar do leitor e contribuem para o apelo visual geral de um website. No entanto, sua apar\u00eancia padr\u00e3o pode, por vezes, parecer ins\u00edpida ou desconectada da identidade \u00fanica de sua marca.<\/p>\n","protected":false},"author":2024234,"featured_media":113336,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[517],"tags":[],"marketing_persona":[],"marketing_intent":[],"class_list":["post-125143","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-recursos-pt-br"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Como Remover Marcadores em CSS? (li ol) Lista N\u00e3o Ordenada Sem Marcadores<\/title>\n<meta name=\"description\" content=\"Marcadores e listas numeradas \u2013 esses elementos aparentemente simples \u2013 desempenham um papel surpreendentemente importante no design de websites. Eles organizam informa\u00e7\u00f5es, direcionam o olhar do leitor e contribuem para o apelo visual geral de um website. No entanto, sua apar\u00eancia padr\u00e3o pode, por vezes, parecer ins\u00edpida ou desconectada da identidade \u00fanica de sua marca.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/blog\/pt-br\/como-remover-marcadores-em-css-li-ol-lista-nao-ordenada-sem-marcadores\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Como Remover Marcadores em CSS? (li ol) Lista N\u00e3o Ordenada Sem Marcadores\" \/>\n<meta property=\"og:description\" content=\"Marcadores e listas numeradas \u2013 esses elementos aparentemente simples \u2013 desempenham um papel surpreendentemente importante no design de websites. Eles organizam informa\u00e7\u00f5es, direcionam o olhar do leitor e contribuem para o apelo visual geral de um website. No entanto, sua apar\u00eancia padr\u00e3o pode, por vezes, parecer ins\u00edpida ou desconectada da identidade \u00fanica de sua marca.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/pt-br\/como-remover-marcadores-em-css-li-ol-lista-nao-ordenada-sem-marcadores\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/elemntor\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-03-03T06:22:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-16T22:31:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"631\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Itamar Haim\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@elemntor\" \/>\n<meta name=\"twitter:site\" content=\"@elemntor\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Itamar Haim\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"14 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/pt-br\\\/como-remover-marcadores-em-css-li-ol-lista-nao-ordenada-sem-marcadores\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/pt-br\\\/como-remover-marcadores-em-css-li-ol-lista-nao-ordenada-sem-marcadores\\\/\"},\"author\":{\"name\":\"Itamar Haim\",\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/pt-br\\\/#\\\/schema\\\/person\\\/5d24783541c454816685653dfed73377\"},\"headline\":\"Como Remover Marcadores em CSS? (li ol) Lista N\u00e3o Ordenada Sem Marcadores\",\"datePublished\":\"2025-03-03T06:22:30+00:00\",\"dateModified\":\"2025-11-16T22:31:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/pt-br\\\/como-remover-marcadores-em-css-li-ol-lista-nao-ordenada-sem-marcadores\\\/\"},\"wordCount\":2755,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/pt-br\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/pt-br\\\/como-remover-marcadores-em-css-li-ol-lista-nao-ordenada-sem-marcadores\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/elementor.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\",\"articleSection\":[\"Recursos\"],\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/elementor.com\\\/blog\\\/pt-br\\\/como-remover-marcadores-em-css-li-ol-lista-nao-ordenada-sem-marcadores\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/pt-br\\\/como-remover-marcadores-em-css-li-ol-lista-nao-ordenada-sem-marcadores\\\/\",\"url\":\"https:\\\/\\\/elementor.com\\\/blog\\\/pt-br\\\/como-remover-marcadores-em-css-li-ol-lista-nao-ordenada-sem-marcadores\\\/\",\"name\":\"Como Remover Marcadores em CSS? (li ol) Lista N\u00e3o Ordenada Sem Marcadores\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/pt-br\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/pt-br\\\/como-remover-marcadores-em-css-li-ol-lista-nao-ordenada-sem-marcadores\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/pt-br\\\/como-remover-marcadores-em-css-li-ol-lista-nao-ordenada-sem-marcadores\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/elementor.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\",\"datePublished\":\"2025-03-03T06:22:30+00:00\",\"dateModified\":\"2025-11-16T22:31:04+00:00\",\"description\":\"Marcadores e listas numeradas \u2013 esses elementos aparentemente simples \u2013 desempenham um papel surpreendentemente importante no design de websites. Eles organizam informa\u00e7\u00f5es, direcionam o olhar do leitor e contribuem para o apelo visual geral de um website. No entanto, sua apar\u00eancia padr\u00e3o pode, por vezes, parecer ins\u00edpida ou desconectada da identidade \u00fanica de sua marca.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/pt-br\\\/como-remover-marcadores-em-css-li-ol-lista-nao-ordenada-sem-marcadores\\\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/elementor.com\\\/blog\\\/pt-br\\\/como-remover-marcadores-em-css-li-ol-lista-nao-ordenada-sem-marcadores\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/pt-br\\\/como-remover-marcadores-em-css-li-ol-lista-nao-ordenada-sem-marcadores\\\/#primaryimage\",\"url\":\"https:\\\/\\\/elementor.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\",\"contentUrl\":\"https:\\\/\\\/elementor.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\",\"width\":1200,\"height\":631},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/pt-br\\\/como-remover-marcadores-em-css-li-ol-lista-nao-ordenada-sem-marcadores\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/elementor.com\\\/blog\\\/pt-br\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Recursos\",\"item\":\"https:\\\/\\\/elementor.com\\\/blog\\\/pt-br\\\/category\\\/recursos-pt-br\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Como Remover Marcadores em CSS? (li ol) Lista N\u00e3o Ordenada Sem Marcadores\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/pt-br\\\/#website\",\"url\":\"https:\\\/\\\/elementor.com\\\/blog\\\/pt-br\\\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/pt-br\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/elementor.com\\\/blog\\\/pt-br\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/pt-br\\\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\\\/\\\/elementor.com\\\/blog\\\/pt-br\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/pt-br\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/elementor.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/images.png\",\"contentUrl\":\"https:\\\/\\\/elementor.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/pt-br\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/elemntor\\\/\",\"https:\\\/\\\/x.com\\\/elemntor\",\"https:\\\/\\\/www.instagram.com\\\/elementor\\\/\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1\",\"https:\\\/\\\/en.wikipedia.org\\\/wiki\\\/Elementor\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/pt-br\\\/#\\\/schema\\\/person\\\/5d24783541c454816685653dfed73377\",\"name\":\"Itamar Haim\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g\",\"caption\":\"Itamar Haim\"},\"description\":\"Itamar Haim, SEO Team Lead at Elementor, is a digital strategist merging SEO &amp; AEO \\\/ GEO, and web development. He leverages deep WordPress expertise to drive global organic growth, empowering businesses to navigate the AI era and ensuring top-tier search performance for millions of websites.\",\"sameAs\":[\"https:\\\/\\\/elementor.com\\\/blog\\\/author\\\/itamarha\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/itamar-haim-8149b85b\\\/\"],\"url\":\"https:\\\/\\\/elementor.com\\\/blog\\\/pt-br\\\/author\\\/itamarha\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Como Remover Marcadores em CSS? (li ol) Lista N\u00e3o Ordenada Sem Marcadores","description":"Marcadores e listas numeradas \u2013 esses elementos aparentemente simples \u2013 desempenham um papel surpreendentemente importante no design de websites. Eles organizam informa\u00e7\u00f5es, direcionam o olhar do leitor e contribuem para o apelo visual geral de um website. No entanto, sua apar\u00eancia padr\u00e3o pode, por vezes, parecer ins\u00edpida ou desconectada da identidade \u00fanica de sua marca.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/blog\/pt-br\/como-remover-marcadores-em-css-li-ol-lista-nao-ordenada-sem-marcadores\/","og_locale":"pt_BR","og_type":"article","og_title":"Como Remover Marcadores em CSS? (li ol) Lista N\u00e3o Ordenada Sem Marcadores","og_description":"Marcadores e listas numeradas \u2013 esses elementos aparentemente simples \u2013 desempenham um papel surpreendentemente importante no design de websites. Eles organizam informa\u00e7\u00f5es, direcionam o olhar do leitor e contribuem para o apelo visual geral de um website. No entanto, sua apar\u00eancia padr\u00e3o pode, por vezes, parecer ins\u00edpida ou desconectada da identidade \u00fanica de sua marca.","og_url":"https:\/\/elementor.com\/blog\/pt-br\/como-remover-marcadores-em-css-li-ol-lista-nao-ordenada-sem-marcadores\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2025-03-03T06:22:30+00:00","article_modified_time":"2025-11-16T22:31:04+00:00","og_image":[{"width":1200,"height":631,"url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","type":"image\/png"}],"author":"Itamar Haim","twitter_card":"summary_large_image","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"Escrito por":"Itamar Haim","Est. tempo de leitura":"14 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/pt-br\/como-remover-marcadores-em-css-li-ol-lista-nao-ordenada-sem-marcadores\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/como-remover-marcadores-em-css-li-ol-lista-nao-ordenada-sem-marcadores\/"},"author":{"name":"Itamar Haim","@id":"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/person\/5d24783541c454816685653dfed73377"},"headline":"Como Remover Marcadores em CSS? (li ol) Lista N\u00e3o Ordenada Sem Marcadores","datePublished":"2025-03-03T06:22:30+00:00","dateModified":"2025-11-16T22:31:04+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/como-remover-marcadores-em-css-li-ol-lista-nao-ordenada-sem-marcadores\/"},"wordCount":2755,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/como-remover-marcadores-em-css-li-ol-lista-nao-ordenada-sem-marcadores\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","articleSection":["Recursos"],"inLanguage":"pt-BR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/pt-br\/como-remover-marcadores-em-css-li-ol-lista-nao-ordenada-sem-marcadores\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/pt-br\/como-remover-marcadores-em-css-li-ol-lista-nao-ordenada-sem-marcadores\/","url":"https:\/\/elementor.com\/blog\/pt-br\/como-remover-marcadores-em-css-li-ol-lista-nao-ordenada-sem-marcadores\/","name":"Como Remover Marcadores em CSS? (li ol) Lista N\u00e3o Ordenada Sem Marcadores","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/como-remover-marcadores-em-css-li-ol-lista-nao-ordenada-sem-marcadores\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/como-remover-marcadores-em-css-li-ol-lista-nao-ordenada-sem-marcadores\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","datePublished":"2025-03-03T06:22:30+00:00","dateModified":"2025-11-16T22:31:04+00:00","description":"Marcadores e listas numeradas \u2013 esses elementos aparentemente simples \u2013 desempenham um papel surpreendentemente importante no design de websites. Eles organizam informa\u00e7\u00f5es, direcionam o olhar do leitor e contribuem para o apelo visual geral de um website. No entanto, sua apar\u00eancia padr\u00e3o pode, por vezes, parecer ins\u00edpida ou desconectada da identidade \u00fanica de sua marca.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/como-remover-marcadores-em-css-li-ol-lista-nao-ordenada-sem-marcadores\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/pt-br\/como-remover-marcadores-em-css-li-ol-lista-nao-ordenada-sem-marcadores\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/elementor.com\/blog\/pt-br\/como-remover-marcadores-em-css-li-ol-lista-nao-ordenada-sem-marcadores\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","width":1200,"height":631},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/pt-br\/como-remover-marcadores-em-css-li-ol-lista-nao-ordenada-sem-marcadores\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/pt-br\/"},{"@type":"ListItem","position":2,"name":"Recursos","item":"https:\/\/elementor.com\/blog\/pt-br\/category\/recursos-pt-br\/"},{"@type":"ListItem","position":3,"name":"Como Remover Marcadores em CSS? (li ol) Lista N\u00e3o Ordenada Sem Marcadores"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/pt-br\/#website","url":"https:\/\/elementor.com\/blog\/pt-br\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/pt-br\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/pt-br\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/pt-br\/","logo":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/elemntor\/","https:\/\/x.com\/elemntor","https:\/\/www.instagram.com\/elementor\/","https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1","https:\/\/en.wikipedia.org\/wiki\/Elementor"]},{"@type":"Person","@id":"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/person\/5d24783541c454816685653dfed73377","name":"Itamar Haim","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g","caption":"Itamar Haim"},"description":"Itamar Haim, SEO Team Lead at Elementor, is a digital strategist merging SEO &amp; AEO \/ GEO, and web development. He leverages deep WordPress expertise to drive global organic growth, empowering businesses to navigate the AI era and ensuring top-tier search performance for millions of websites.","sameAs":["https:\/\/elementor.com\/blog\/author\/itamarha\/","https:\/\/www.linkedin.com\/in\/itamar-haim-8149b85b\/"],"url":"https:\/\/elementor.com\/blog\/pt-br\/author\/itamarha\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/posts\/125143","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/users\/2024234"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/comments?post=125143"}],"version-history":[{"count":0,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/posts\/125143\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/media\/113336"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/media?parent=125143"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/categories?post=125143"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/tags?post=125143"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/marketing_persona?post=125143"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/marketing_intent?post=125143"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}