Alterar a cor dos marcadores de uma lista HTML sem usar span

Eu queria saber se existe uma maneira de alterar a cor nos marcadores de uma lista.

Eu tenho uma lista como esta:

<ul>
   <li>House</li>
   <li>Car</li>
   <li>Garden</li>
</ul>

Não é possível inserir nada nos li's, como 'span' og a 'p'. Posso alterar a cor dos marcadores, mas não o texto de uma maneira inteligente?

Se você pode usar uma imagem, você pode fazer isso. E sem uma imagem você não poderá mudar apenas a cor dos marcadores e não do texto.

Usando uma imagem

li { list-style-image: url(images/yourimage.jpg); }

Vejo

list-style-image

Sem usar uma imagem

Então você tem que editar a marcação HTML e incluir um intervalo dentro da lista e colorir li e span com cores diferentes.

Consegui isso sem adicionar marcação, mas usando li:before. Obviamente, isso tem todas as limitações do :before(sem suporte ao IE antigo), mas parece funcionar com o IE8, Firefox e Chrome após alguns testes muito limitados. O estilo de marcador também é limitado pelo que está em Unicode.

li {
  list-style: none;
}
li:before {
  /* For a round bullet */
  content: '\2022';
  /* For a square bullet */
  /*content:'\25A0';*/
  display: block;
  position: relative;
  max-width: 0;
  max-height: 0;
  left: -10px;
  top: 0;
  color: green;
  font-size: 20px;
}

<ul>
  <li>foo</li>
  <li>bar</li>
</ul>

Podemos combinar list-style-imagecom svgs, que podemos embutir em css ! Este método oferece um controle incrível sobre as "balas", que podem se tornar qualquer coisa.

Para obter um círculo vermelho, basta usar o seguinte css:

ul {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><circle fill="red" cx="5" cy="5" r="2"/></svg>');
}

Mas isso é apenas o começo. Isso nos permite fazer qualquer coisa maluca que quisermos com essas balas. círculos ou retângulos são fáceis, mas qualquer coisa com que você possa desenhar svgpode ficar ali! Confira o exemplo bullseye abaixo:

ul {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><circle fill="red" cx="5" cy="5" r="5"/></svg>');
}
ul ul {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><rect fill="red" x="0" y="0" height="10" width="10"/></svg>');
}
ul ul ul {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><circle fill="red" cx="5" cy="5" r="3"/></svg>');
}
ul ul ul ul {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><rect fill="red" x="2" y="2" height="4" width="4"/></svg>');
}
ul.bulls-eye {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><circle fill="red" cx="5" cy="5" r="5"/><circle fill="white" cx="5" cy="5" r="4"/><circle fill="red" cx="5" cy="5" r="2"/></svg>');
}
ul.multi-color {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" width="15" height="15"><circle fill="blue" cx="6" cy="6" r="6"/><circle fill="pink" cx="6" cy="6" r="4"/><circle fill="green" cx="6" cy="6" r="2"/></svg>');
}

<ul>
  <li>
    Big circles!

    <ul>
      <li>Big rectangles!</li>
      <li>b
        <ul>
          <li>Small circles!</li>
          <li>c
            <ul>
              <li>Small rectangles!</li>
              <li>b</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li>b</li>
</ul>

<ul class="bulls-eye">
  <li>Bulls</li>
  <li>eyes.</li>
</ul>

<ul class="multi-color">
  <li>Multi</li>
  <li>color</li>
</ul>

Atributos de largura / altura

Alguns navegadores requerem widthe heightatributos para ser definida no<svg> , ou eles não apresentar nada. No momento em que este artigo foi escrito, as versões recentes do Firefox apresentavam esse problema. Eu defini ambos os atributos nos exemplos.

Codificações

Um comentário recente me lembrou de codificações para o data-uri. Isso foi um ponto doloroso para mim recentemente, e posso compartilhar um pouco das informações que pesquisei.

A especificação data-uri , que faz referência à especificação URI , diz que o svg deve ser codificado de acordo com a especificação URI . Isso significa que todos os tipos de caracteres devem ser codificados, por exemplo, <se torna %3C.

Algumas fontes sugerem a codificação base64, que deve corrigir os problemas de codificação; no entanto, aumentará desnecessariamente o tamanho do SVG, enquanto a codificação URI não. Eu recomendo a codificação URI.

Mais informações:

suporte do navegador: > ie8

truques de css em svgs

mdn em svgs

Construindo a solução de @Marc - como o caractere de marcador é renderizado de maneira diferente com diferentes fontes e navegadores, usei a seguinte técnica css3 com border-radius para fazer um marcador sobre o qual tenho mais controle:

li:before {
    content: '';
    background-color: #898989;
    display: inline-block;
    position: relative;
    height: 12px;
    width: 12px;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    margin-right: 4px;
    top: 2px;
}

Eu sei que esta é uma questão muito, muito antiga, mas eu estava brincando com isso e descobri uma maneira que não vi postada. Dê uma cor à lista e, em seguida, substitua a cor do texto usando o ::first-lineseletor. Não sou nenhum especialista, então talvez haja algo de errado com essa abordagem que estou perdendo, mas parece funcionar.

li {
  color: blue;
}

li::first-line {
  color: black;
}

<ul>
  <li>House</li>
  <li>Car</li>
  <li>Garden</li>
</ul>

Construindo soluções @Marc e @jessica - Esta é a solução que eu uso:

li { 
   position:relative;
}
li:before {
      content:'';
      display: block;
      position: absolute;
      width: 6px;
      height:6px;
      border-radius:6px;
      left: -20px;
      top: .5em;
      background-color: #000;
}

Eu uso empara tamanhos de fonte, então se você definir seu topvalor como sendo, .5emele sempre será colocado no meio da sua primeira linha de texto. Usei left:-20pxporque essa é a posição padrão dos marcadores nos navegadores: pai padding/2

Eu realmente gostei da resposta de Marc também - eu precisava de um conjunto de ULs de cores diferentes e, obviamente, seria mais fácil usar apenas uma classe. Aqui está o que usei para laranja, por exemplo:

ul.orange {
    list-style: none;
    padding: 0px;
}
ul.orange > li:before {
    content: '\25CF ';
    font-size: 15px;
    color: #F00;
    margin-right: 10px;
    padding: 0px;
    line-height: 15px;
}

Além disso, descobri que o código hexadecimal que usei para "conteúdo:" era diferente do de Marc (aquele círculo hexadecimal parecia um pouco alto). O que usei parece se encaixar perfeitamente no meio. Também encontrei várias outras formas (quadrados, triângulos, círculos, etc.) aqui

Para mim, a melhor opção é usar pseudoelementos CSS, portanto, para o discestilo de marcador seria assim:

ul {
  list-style-type: none;
}

li {
  position: relative;
}

li:before {
  content: '';
  display: block;
  position: absolute;
  width: 5px; /* adjust to suit your needs */
  height: 5px; /* adjust to suit your needs */
  border-radius: 50%;
  left: -15px; /* adjust to suit your needs */
  top: 0.5em;
  background: #f00; /* adjust to suit your needs */
}

<ul>
  <li>first</li>
  <li>second</li>
  <li>third</li>
</ul>

Notas:

• width e height deve ter valores iguais para manter os ponteiros arredondados
• você pode definir border-radiuscomo zero se quiser ter squaremarcadores de lista

Para mais estilos de marcadores, você pode usar outras formas css https://css-tricks.com/examples/ShapesOfCSS/ (escolha esta opção que não requer pseudo elementos para funcionar, por exemplo, triângulos)

::marcador

Você pode usar o ::markerpseudoelemento CSS para selecionar a caixa do marcador de um item da lista (ou seja, marcadores ou números).

ul li::marker {
  color: red;
}

Observação: no momento em que postamos esta resposta, esta é considerada uma tecnologia experimental e só foi implementada no Firefox e Safari (até agora).

Com base na resposta de @ddilsaver. Eu queria ser capaz de usar um sprite para a bala. Isso parece funcionar:

li {
  list-style: none;
  position: relative;
}

li:before {
  content:'';
  display: block;
  position: absolute;
  width: 20px;
  height: 20px;
  left: -30px;
  top: 5px;
  background-image: url(i20.png); 
  background-position: 0px -40px; /* or whatever offset you want */
}

Eu tentei isso hoje e digitei o seguinte:
Eu precisava exibir marcadores de cores em minhas listas (marcadores e números). Descobri esta dica e escrevi na minha folha de estilo com a mutualização das propriedades:

ul,
ol {
  list-style: none;
  padding: 0;
  margin: 0 0 0 15px;
}
ul {}
ol {
  counter-reset: li;
}
li {
  padding-left: 1em; 
}
ul li {}
ul li::before,
ol li::before {
  color: #91be3c;
  display: inline-block;
  width: 1em;
}
ul li::before {
  content: "\25CF";
  margin: 0 0.1em 0 -1.1em;
}
ol li {
  counter-increment: li;
}
ol li::before {
  content: counter(li);
  margin: 0 0 0 -1em;
}

Escolhi um personagem diferente para exibir uma bala, observando aqui . Eu precisei ajustar a margem de forma adequada, talvez os valores não se apliquem com a fonte que você escolheu (os números usam sua webfont).

Tente usar isto:

ul {
  color: red;
}

Versão inline, funciona para Outlook Desktop:

<ul style="list-style:square;">
  <li style="color:red;"><span style="color:black;">Lorem.</span></li>
  <li style="color:red;"><span style="color:black;">Lorem.</span></li>
</ul>

JSFiddle .