:: marcador - CSS-Tricks

Anonim

O ::marker pseudoelemento serve para definir o estilo do marcador estilístico de um elemento da lista. Por exemplo, o marcador de um padrão

    (por exemplo •) ou o numeral de um padrão
      (por exemplo, 1.). Isso torna extremamente fácil fazer coisas simples como colori-los.

      Como um pseudoelemento, você poderá selecionar ::markerno DevTools para inspecionar, mas não está realmente “no DOM” como um elemento normal.

      Chrome DevTools selecionando o ::markerpseudoelemento e mostrando os estilos.

      Você pode combinar ::markercom a contentpropriedade para alterar o que é o marcador. Por exemplo, substituindo marcadores de lista por emoji:

      Se você alterar a display propriedade para list-itemem qualquer elemento, poderá controlá-la ::marker. Aqui

      os elementos são numerados, o que combina a ideia de contadores CSS:

      Os marcadores ainda são marcadores de lista, portanto, estão sujeitos a coisas como list-style-position.

      Relacionado

      Artigo em 5 de maio de 2020

      Receitas de estilo de lista

      Chris Coyier

      Mais Informações

      • Spec

      Suporte para navegador

      Os dados de suporte deste navegador são do Caniuse, que tem mais detalhes. Um número indica que o navegador oferece suporte ao recurso nessa versão e superior.

      Área de Trabalho

      cromada Raposa de fogo IE Beira Safári
      86 68 Não 86 11,1

      Celular / Tablet

      Android Chrome Android Firefox Android iOS Safari
      88 85 81 11,3-11,4