Cómo - Cambiar el color de la viñeta de las listas
Aprende a cambiar los colores de las viñetas de las listas con CSS.
Cambiar color de viñeta
- adela
- Inés
- Porra
- Beto
Paso 1) Agregar HTML:
Crea una lista básica:
Ejemplo
<ul>
<li>Adele</li>
<li>Agnes</li>
<li>Billy</li>
<li>Bob</li>
</ul>
Paso 2) Agregar CSS:
De forma predeterminada, no es posible cambiar el color de la viñeta de un elemento de la lista. Sin embargo, puedes hacer algunos trucos de CSS para hacerlo posible. Tenga en cuenta que es posible que tenga que modificarlo un poco diferente si está utilizando un marco CSS o una hoja de estilo especial:
Ejemplo
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) */
}