{"id":3102,"date":"2014-10-29T00:33:14","date_gmt":"2014-10-29T02:33:14","guid":{"rendered":"https:\/\/www.kadunew.com\/blog\/?p=3102"},"modified":"2014-11-09T19:45:34","modified_gmt":"2014-11-09T21:45:34","slug":"personalizando-listas-ordenadas-com-pseudo-elemento-before","status":"publish","type":"post","link":"https:\/\/www.kadunew.com\/blog\/css\/personalizando-listas-ordenadas-com-pseudo-elemento-before","title":{"rendered":"Lista ordenada com pseudo-elemento ::before, counter-increment e counter"},"content":{"rendered":"

Os navegadores da Web permitem que voc\u00ea personalize a apar\u00eancia da maioria dos aspectos de uma p\u00e1gina usando CSS. Mas alguns elementos tornam-se um pouco mais dif\u00edcil de aplicarmos uma estiliza\u00e7\u00e3o. Uma d\u00favida seguida que vejo \u00e9 de como mudar o estilo do marcador em listas n\u00e3o ordenadas ou n\u00fameros em listas ordenadas. Normalmente usamos list-style-type<\/code>, list-style-image<\/code>, e list-style-position<\/code>. Mas fazer algo t\u00e3o simples, como mudar a cor de fundo dos n\u00fameros na lista, as vezes podemos usar um c\u00f3digo mais limpo e bonito.<\/p>\n

Felizmente, atrav\u00e9s da combina\u00e7\u00e3o de um par de propriedades CSS menos conhecidos voc\u00ea pode adicionar n\u00fameros a suas listas. O truque \u00e9 feitos em duas etapas basicamente: primeiro escondemos os n\u00fameros padr\u00f5es da marca\u00e7\u00e3o por completo, em seguida, usamos o ::before pseudo-elemento<\/code> para adicionar os n\u00fameros de volta.<\/p>\n

Resultado final<\/p>\n

    \n
  1. This is the first item<\/li>\n
  2. This is the second item<\/li>\n
  3. This is the third item<\/li>\n
  4. This is the fourth item<\/li>\n
  5. This is the fifth item<\/li>\n
  6. This is the sixth item<\/li>\n<\/ol>\n

    Passo 1<\/strong>: Adicione um identificador para sua lista ordenada \u00c9 uma boa pr\u00e1tica para identificar cada lista que voc\u00ea deseja personalizar.<\/p>\n

    \r\n<ol class="custom-counter">\r\n   <li>This is the first item<\/li>\r\n   <li>This is the second item<\/li>\r\n   <li>This is the third item<\/li>\r\n   <li>This is the fourth item<\/li>\r\n   <li>This is the fifth item<\/li>\r\n   <li>This is the sixth item<\/li>\r\n<\/ol>\r\n<\/pre>\n
    Passo 2<\/strong>: Temos que ter certeza de que o navegador n\u00e3o est\u00e1 adicionando seus n\u00fameros padr\u00f5es. Logo devemos remover a numera\u00e7\u00e3o e o ponto padr\u00e3o da sua lista. Aplicando a seguinte estiliza\u00e7\u00e3o voc\u00ea consegue fazer isso.<\/p>\n
    \r\n.custom-counter {\r\n  margin: 0;\r\n  padding: 0;\r\n  list-style-type: none;\r\n}\r\n<\/pre>\n
    Passo 3<\/strong>: Agora que removemos os marcadores padr\u00e3o precisamos atribuir um nome para nosso contador e for\u00e7a-lo a aparecer novamente. Fizemos isso atrav\u00e9s da propriedade counter-increment<\/code>. No exemplo vou usar como valor dessa propriedade o nome num-list<\/em>. Perceba que num-list<\/em> n\u00e3o significa nada de especial, n\u00e3o \u00e9 um valor CSS. \u00c9 apenas um apelido que vamos usar na pr\u00f3xima etapa. Voc\u00ea pode usar qualquer nome aqui.<\/p>\n
    \r\n.custom-counter li {\r\n  counter-increment: num-list;\r\n  margin-bottom: 10px;\r\n} \r\n<\/pre>\n
    Passo 4<\/strong>: Use o pseudo-elemento ::before<\/code> para adicionar os n\u00fameros da lista e seus estilos antes do item da lista:<\/p>\n
    \r\n.custom-counter li::before {\r\n  content: counter(num-list);\r\n  margin-right: 5px;\r\n  font-size: 80%;\r\n  background-color: rgb(0,200,200);\r\n  color: white;\r\n  font-weight: bold;\r\n  padding: 3px 8px;\r\n  border-radius: 3px;\r\n}\r\n<\/pre>\n
    O pseudo-elemento ::before<\/code> permite inserir conte\u00fado antes de um elemento. Neste caso, ele ir\u00e1 inserir o conte\u00fado antes de um item da lista. Voc\u00ea pode usar a propriedade content:<\/code> para dizer ao navegador que o conte\u00fado deve ser colocado no in\u00edcio do elemento HTML. Podemos colocar palavras, caracteres ou algo gerado automaticamente pelo navegador, igual ao exemplo que mostrei. Note que para a propriedade counter()<\/code> foi passado o apelido do identificador que criamos na etapa anterior.<\/p>\n
    Neste tutorial eu quis mostrar uma maneira bem f\u00e1cil e simples que voc\u00ea pode usar para personalizar a apar\u00eancia dos n\u00fameros nas suas listas ordenadas.<\/p>\n
    Siga-me no Twitter: @kadunew<\/a> ou assine nosso Feed<\/a> e fique por dentro de todas atualiza\u00e7\u00f5es aqui do blog.<\/p>\n","protected":false},"excerpt":{"rendered":"
    Os navegadores da Web permitem que voc\u00ea personalize a apar\u00eancia da maioria dos aspectos de uma p\u00e1gina usando CSS. Mas alguns elementos tornam-se um pouco mais dif\u00edcil de aplicarmos uma estiliza\u00e7\u00e3o. Uma d\u00favida seguida que vejo \u00e9 de como mudar o estilo do marcador em listas n\u00e3o ordenadas ou n\u00fameros em listas ordenadas. Normalmente usamos […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-3102","post","type-post","status-publish","format-standard","hentry","category-css"],"yoast_head":"\nLista ordenada com pseudo-elemento ::before, counter-increment e counter<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.kadunew.com\/blog\/css\/personalizando-listas-ordenadas-com-pseudo-elemento-before\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Lista ordenada com pseudo-elemento ::before, counter-increment e counter\" \/>\n<meta property=\"og:description\" content=\"Os navegadores da Web permitem que voc\u00ea personalize a apar\u00eancia da maioria dos aspectos de uma p\u00e1gina usando CSS. Mas alguns elementos tornam-se um pouco mais dif\u00edcil de aplicarmos uma estiliza\u00e7\u00e3o. Uma d\u00favida seguida que vejo \u00e9 de como mudar o estilo do marcador em listas n\u00e3o ordenadas ou n\u00fameros em listas ordenadas. Normalmente usamos […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.kadunew.com\/blog\/css\/personalizando-listas-ordenadas-com-pseudo-elemento-before\" \/>\n<meta property=\"og:site_name\" content=\"KADUNEW\" \/>\n<meta property=\"article:published_time\" content=\"2014-10-29T02:33:14+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2014-11-09T21:45:34+00:00\" \/>\n<meta name=\"author\" content=\"Kadu Oliveira\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kadu Oliveira\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/css\/personalizando-listas-ordenadas-com-pseudo-elemento-before\",\"url\":\"https:\/\/www.kadunew.com\/blog\/css\/personalizando-listas-ordenadas-com-pseudo-elemento-before\",\"name\":\"Lista ordenada com pseudo-elemento ::before, counter-increment e counter\",\"isPartOf\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/#website\"},\"datePublished\":\"2014-10-29T02:33:14+00:00\",\"dateModified\":\"2014-11-09T21:45:34+00:00\",\"author\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/css\/personalizando-listas-ordenadas-com-pseudo-elemento-before#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.kadunew.com\/blog\/css\/personalizando-listas-ordenadas-com-pseudo-elemento-before\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/css\/personalizando-listas-ordenadas-com-pseudo-elemento-before#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.kadunew.com\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS\",\"item\":\"https:\/\/www.kadunew.com\/blog\/category\/css\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Lista ordenada com pseudo-elemento ::before, counter-increment e counter\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/#website\",\"url\":\"https:\/\/www.kadunew.com\/blog\/\",\"name\":\"KADUNEW\",\"description\":\"Artigos sobre Front-End e Programa\u00e7\u00e3o web\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.kadunew.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05\",\"name\":\"Kadu Oliveira\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g\",\"caption\":\"Kadu Oliveira\"},\"sameAs\":[\"https:\/\/www.kadunew.com\/blog\"],\"url\":\"https:\/\/www.kadunew.com\/blog\/author\/admin\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Lista ordenada com pseudo-elemento ::before, counter-increment e counter","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:\/\/www.kadunew.com\/blog\/css\/personalizando-listas-ordenadas-com-pseudo-elemento-before","og_locale":"pt_BR","og_type":"article","og_title":"Lista ordenada com pseudo-elemento ::before, counter-increment e counter","og_description":"Os navegadores da Web permitem que voc\u00ea personalize a apar\u00eancia da maioria dos aspectos de uma p\u00e1gina usando CSS. Mas alguns elementos tornam-se um pouco mais dif\u00edcil de aplicarmos uma estiliza\u00e7\u00e3o. Uma d\u00favida seguida que vejo \u00e9 de como mudar o estilo do marcador em listas n\u00e3o ordenadas ou n\u00fameros em listas ordenadas. Normalmente usamos […]","og_url":"https:\/\/www.kadunew.com\/blog\/css\/personalizando-listas-ordenadas-com-pseudo-elemento-before","og_site_name":"KADUNEW","article_published_time":"2014-10-29T02:33:14+00:00","article_modified_time":"2014-11-09T21:45:34+00:00","author":"Kadu Oliveira","twitter_misc":{"Escrito por":"Kadu Oliveira","Est. tempo de leitura":"3 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.kadunew.com\/blog\/css\/personalizando-listas-ordenadas-com-pseudo-elemento-before","url":"https:\/\/www.kadunew.com\/blog\/css\/personalizando-listas-ordenadas-com-pseudo-elemento-before","name":"Lista ordenada com pseudo-elemento ::before, counter-increment e counter","isPartOf":{"@id":"https:\/\/www.kadunew.com\/blog\/#website"},"datePublished":"2014-10-29T02:33:14+00:00","dateModified":"2014-11-09T21:45:34+00:00","author":{"@id":"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05"},"breadcrumb":{"@id":"https:\/\/www.kadunew.com\/blog\/css\/personalizando-listas-ordenadas-com-pseudo-elemento-before#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.kadunew.com\/blog\/css\/personalizando-listas-ordenadas-com-pseudo-elemento-before"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.kadunew.com\/blog\/css\/personalizando-listas-ordenadas-com-pseudo-elemento-before#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.kadunew.com\/blog"},{"@type":"ListItem","position":2,"name":"CSS","item":"https:\/\/www.kadunew.com\/blog\/category\/css"},{"@type":"ListItem","position":3,"name":"Lista ordenada com pseudo-elemento ::before, counter-increment e counter"}]},{"@type":"WebSite","@id":"https:\/\/www.kadunew.com\/blog\/#website","url":"https:\/\/www.kadunew.com\/blog\/","name":"KADUNEW","description":"Artigos sobre Front-End e Programa\u00e7\u00e3o web","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.kadunew.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05","name":"Kadu Oliveira","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g","caption":"Kadu Oliveira"},"sameAs":["https:\/\/www.kadunew.com\/blog"],"url":"https:\/\/www.kadunew.com\/blog\/author\/admin"}]}},"_links":{"self":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts\/3102"}],"collection":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/comments?post=3102"}],"version-history":[{"count":20,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts\/3102\/revisions"}],"predecessor-version":[{"id":3138,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts\/3102\/revisions\/3138"}],"wp:attachment":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/media?parent=3102"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/categories?post=3102"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/tags?post=3102"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}