Como - Alterar a cor do marcador das listas
Saiba como alterar as cores dos marcadores para listas com CSS.
Alterar a cor do marcador
- Adele
- Inês
- Billy
- Prumo
Etapa 1) Adicionar HTML:
Crie uma lista básica:
Exemplo
<ul>
<li>Adele</li>
<li>Agnes</li>
<li>Billy</li>
<li>Bob</li>
</ul>
Etapa 2) Adicionar CSS:
Por padrão, não é possível alterar a cor do marcador de um item da lista. No entanto, você pode fazer alguns truques de CSS para tornar isso possível. Observe que você pode ter que ajustá-lo um pouco diferente se estiver usando uma estrutura CSS ou uma folha de estilo especial:
Exemplo
ul {
list-style: none; /* Remove default bullets */
}
ul li::before {
content: "\2022"; /* Add content: \2022 is the CSS Code/unicode for a
bullet */
color: red; /* Change the color */
font-weight:
bold; /* If you want it to be bold */
display: inline-block; /*
Needed to add space between the bullet and the text */
width: 1em;
/* Also needed for space (tweak if needed) */
margin-left: -1em; /*
Also needed for space (tweak if needed) */
}