Cambiar el color de las viñetas de una lista HTML sin usar span

Me preguntaba si hay alguna forma de cambiar el color de las viñetas en una lista.

Tengo una lista como esta:

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

No es posible para mí insertar nada en los li, como un "intervalo" o una "p". Entonces, ¿puedo cambiar el color de las viñetas pero no el texto de alguna manera inteligente?

Si puede usar una imagen, puede hacerlo. Y sin una imagen, no podrá cambiar el color de las viñetas solo y no el texto.

Usando una imagen

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

Ver

imagen-estilo-lista

Sin usar una imagen

Luego, debe editar el marcado HTML e incluir un intervalo dentro de la lista y colorear el li y el intervalo con diferentes colores.

Logré esto sin agregar marcado, sino usando li:before. Obviamente, esto tiene todas las limitaciones de :before(sin soporte antiguo de IE), pero parece funcionar con IE8, Firefox y Chrome después de algunas pruebas muy limitadas. El estilo de viñeta también está limitado por lo que está en 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-imagecon svgs, que podemos incorporar en css ! Este método ofrece un control increíble sobre las "balas", que pueden convertirse en cualquier cosa.

Para obtener un círculo rojo, simplemente use el siguiente 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>');
}

Pero esto es solo el principio. Esto nos permite hacer cualquier locura que queramos con esas balas. los círculos o rectángulos son fáciles, ¡pero cualquier cosa que puedas dibujar svgse puede pegar allí! Mira el ejemplo de la diana a continuación:

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 ancho / alto

Algunos navegadores requieren que se establezcan atributos widthy heighten el <svg>, o no muestran nada. Al momento de escribir este artículo, las versiones recientes de Firefox presentan este problema. Establecí ambos atributos en los ejemplos.

Codificaciones

Un comentario reciente me recordó las codificaciones del data-uri. Este fue un punto de dolor para mí recientemente, y puedo compartir un poco de información que he investigado.

La especificación data-uri , que hace referencia a la especificación URI , dice que el svg debe codificarse de acuerdo con la especificación URI . Eso significa que se deben codificar todo tipo de caracteres, por ejemplo, se <convierte en %3C.

Algunas fuentes sugieren la codificación base64, que debería solucionar los problemas de codificación, sin embargo, aumentará innecesariamente el tamaño del SVG, mientras que la codificación URI no. Recomiendo la codificación URI.

Más información:

soporte de navegador: > ie8

trucos css en svgs

mdn en svgs

Partiendo de la solución de @ Marc: dado que el carácter de viñeta se representa de manera diferente con diferentes fuentes y navegadores, utilicé la siguiente técnica css3 con border-radius para hacer una viñeta sobre la que tengo más control:

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;
}

Sé que esta es una pregunta muy, muy antigua, pero estaba jugando con esto y se me ocurrió una forma que no he visto publicada. Dale un color a la lista y luego sobrescribe el color del texto usando el ::first-lineselector. No soy un experto, así que tal vez haya algo mal en este enfoque que me falta, pero parece funcionar.

li {
  color: blue;
}

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

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

Aprovechando las soluciones @Marc y @jessica: esta es la solución que 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;
}

Utilizo empara tamaños de fuente, por lo que si establece su topvalor en .5em, siempre se colocará en el punto medio de la primera línea de texto. Lo usé left:-20pxporque esa es la posición predeterminada de las viñetas en los navegadores: padre padding/2

También me gustó mucho la respuesta de Marc: necesitaba un conjunto de UL de diferentes colores y, obviamente, sería más fácil usar una clase. Esto es lo que usé para naranja, por ejemplo:

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;
}

Además, descubrí que el código hexadecimal que usé para "contenido:" era diferente al de Marc (ese círculo hexadecimal parecía estar demasiado alto). El que usé parece encajar perfectamente en el medio. También encontré varias otras formas (cuadrados, triángulos, círculos, etc.) aquí mismo

Para mí, la mejor opción es usar pseudo elementos CSS, por lo que para el discestilo de viñeta se vería así:

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:

• widthy heightdebe tener valores iguales para mantener los punteros redondeados
• puede establecerlo border-radiusen cero si desea tener squareviñetas de lista

Para más estilos de viñetas, puede usar otras formas CSS https://css-tricks.com/examples/ShapesOfCSS/ (elija esto que no requiere pseudo elementos para funcionar, por ejemplo, triángulos)

::marcador

Puede utilizar el ::markerpseudoelemento CSS para seleccionar el cuadro de marcador de un elemento de la lista (es decir, viñetas o números).

ul li::marker {
  color: red;
}

Nota: En el momento de publicar esta respuesta, esto se considera tecnología experimental y solo se ha implementado en Firefox y Safari (hasta ahora).

Sobre la base de la respuesta de @ ddilsaver. Quería poder usar un objeto para la bala. Esto 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 */
}

Intenté esto hoy y escribí esto:
necesitaba mostrar marcadores de color en mis listas (tanto viñetas como números). Encontré este consejo y escribí en mi hoja de estilo con la mutualización de las propiedades:

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;
}

Elegí un personaje diferente para mostrar una viñeta, mirándolo aquí . Necesitaba ajustar el margen de manera acorde, tal vez los valores no se apliquen con la fuente que eligió (los números usan su fuente web).

Intente usar esto en su lugar:

ul {
  color: red;
}

Versión en línea, 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 .