Finalmente, será fácil cambiar el color de las viñetas de la lista | Programar Plus

En mis años de germinación, el consejo general fue este:

<ul>
  <li><span>List item</span></li>
  <!-- ... -->
</ul>

li { color: red; } /* bullet */
li span { color: black; } /* text */

No es terrible, pero tampoco genial. Estás “reiniciando” todo en el nivel de tramo, por lo que se vuelve más complicado cuanto más lo haces.

Las cosas se están volviendo mucho más fáciles. Demos un paseo por este mundo cada vez más moderno a medida que avanzamos.

Una alternativa era copiar el estilo de lista predeterminado y reemplazarlo con un pseudoelemento.

ul {
  list-style: none;
}

li::before {
  content: "• ";
  color: red;
}

Si necesitamos contar, podríamos hacerlo con contadores CSS.

ol {
  list-style: none;
  counter-reset: my-awesome-counter;
}

ol li {
  counter-increment: my-awesome-counter;
}

ol li::before {
  content: counter(my-awesome-counter) ". ";
  color: red;
}

Dejando de lado aquí: esto no ayuda con el color, pero puede especificar qué carácter usar para la viñeta configurando una cadena, como:

ul {
  list-style-type: '✽ ';
}

Esto es a partir de Firefox 39 (2015) y Chrome 79 (que sale el 9 de diciembre de 2019).

Para listas ordenadas, hay un montón de opciones específicas de idioma. Y esos estilos de lenguaje también funcionan para los contadores de CSS, sobre los que puede obtener más información en la inmersión profunda de Hui Jing.

Ver la pluma
Área de juegos de contadores CSS aleatorios por Chen Hui Jing (@huijing)
en CodePen.

Pero mientras tanto, solo queríamos seleccionar la viñeta estúpida (o lo que sea) y darle estilo. Ahora estamos empezando a poder hacer precisamente eso.

A partir de Firefox 68 (julio de 2019), puede hacer lo siguiente:

li::marker {
  color: red;
  content: "►";
}

… Que, como puede ver, cambia el color y la viñeta. Definitivamente es la forma más limpia y fácil de hacerlo, por lo que es bueno ver el progreso.

Tejas demuestra:

Ver la pluma
:: ejemplo de marcador por Tejas (@tejask)
en CodePen.

Manuel Matuzović notas que si pones un elemento en un list-item tipo de pantalla, también puede usar marcadores en ellos.

h2 {
  display: list-item;
}

h2::marker {
  color: orange;
  content: "☞";
}

Incluso Safari tiene soporte en el momento de escribir este artículo, por lo que deberíamos apoyarnos en Chrome aquí.

Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión y posteriores.

Escritorio

Cromo	Firefox	ES DECIR	Borde	Safari
86	68	No	86	11,1

Móvil / Tableta

Android Chrome	Android Firefox	Androide	Safari de iOS
96	95	96	11.3-11.4