post

Atualizar marcador do item (li) de uma lista (ul) com CSS

Publicado em: 19/05/2022 / Atualizado em: 19/05/2022

Categorias: Blog CSS

É possivel trocar o marcado de um item de uma lista, usando apenas o CSS.

Nativamente, não é possivel adicionar cor apenas a este marcador. Você deve editar a cor do texto todo, ou usar uma imagem.

Neste artigo, vou mostrar como substituir com uma imagem. Segue código abaixo:

li {
    list-style-image: url('//SEUSITE.com.br/circulo-amarelo.svg');
}

No código acima, você pode subir um arquivo SVG para seu site, e chamar no codigo CSS.

Ficará desse jeito:

Caso queira o código SVG dessa “bolinha” amarela, segue abaixo:

<svg width="6" height="6" viewBox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
  <circle cx="3" cy="3" r="3" fill="#FACA1F"/>
</svg>

Ou se preferir, você pode salvar ela aqui em baixo:

Pronto!

Seja notificando sempre que tiver conteúdo novo disponível no meu canal do Youtube ou artigo no meu Blog.

Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link curto abaixo. Basta clicar em cima do link para copiar.

bruno.art.br/pb/1715

ID de Referência: 1715

Envie uma mensagem e sugira um publicação sobre um assunto que tenha dificuldades de resolver.