Olá!
Gostaria de saber como eu faço para alterar a cor da bolinha do marcador <li>
via CSS.
Pelo oque eu li na internet, até agora só consegui fazer isso usando uma imagem para substituir a bolinha.
Stack Overflow em Português é um site de perguntas e respostas para programadores profissionais e entusiastas. Leva apenas um minuto para se inscrever.
Inscreva-se para participar desta comunidadeOlá!
Gostaria de saber como eu faço para alterar a cor da bolinha do marcador <li>
via CSS.
Pelo oque eu li na internet, até agora só consegui fazer isso usando uma imagem para substituir a bolinha.
Você pode usar a propriedade list-style-image
e definir uma imagem para substituir as bolinhas:
ul {
list-style-image: url('http://i.stack.imgur.com/5kI3v.png')
}
<ul>
<li>foo</li>
<li>foo</li>
<li>foo</li>
</ul>
Com essa propriedade, é possível até fazer uso de SVG inline para criar uma "imagem" com a bolinha (ou outra forma que preferir). Por exemplo:
/**
* Trocando o atributo "fill" pela cor da sua preferência.
*/
ul {
list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 10 10"><circle fill="blue" cx="7" cy="7" r="2"/></svg>');
}
<ul>
<li>foo</li>
<li>foo</li>
<li>foo</li>
</ul>
Outra alternativa é remover o estilo da lista e criar essas bolinhas com o pseudo elemento :before
:
ul {
list-style: none
}
ul li:before {
content: '\2022';
margin: 0 2px;
color: #e74c3c /* cor da bolinha */
}
<ul>
<li>foo</li>
<li>foo</li>
<li>foo</li>
</ul>
::before
;)
Pode utilizar o seguinte código no css da LI. Em color você muda a cor do before, ou seja, a cor da bolinha.
li {
list-style-type: none;
position:relative;
margin-bottom:0.5em;
}
li:before {
content: '•';
display: inline-block;
position: absolute;
left: -1em;
color:#00c7ba;
}
A cor da bolinha do marcador herda a cor da lista. Se voce definir uma cor para a lista e depois subscrever a cor do elemento da lista com alguma tag, cada um vai possuir a sua cor.
ul li{
color:#f00;
}
ul li span{
color:#222;
}
<ul>
<li><span>Linha 01</span></li>
<li><span>Linha 02</span></li>
<li><span>Linha 03</span></li>
</ul>
Pode por css na ul:
ul {
list-style-image: url('urlimagem');
}
já resolve ;)