¡Las listas son una parte fundamental de HTML! Son útiles en cosas como publicaciones de blogs para enumerar pasos, recetas para enumerar ingredientes o elementos en un menú de navegación. No solo son una oportunidad para diseñar, sino que tienen implicaciones de accesibilidad. Por ejemplo, el número de elementos de una lista se anuncia en un lector de pantalla para dar contexto a la lista.
Centrémonos en las listas de estilo aquí, en su mayoría listas ordenadas y desordenadas (con disculpas por rechazar a nuestro amigo la lista de definiciones), y situaciones de estilo algo inusuales.
Los basicos
Antes de hacer algo demasiado sofisticado, sepa que hay muy pocas configuraciones para list-style-type eso podría cubrir sus necesidades fuera de la puerta.
La ruptura en el medio
Las listas ordenadas pueden start en cualquier número que desee.
Los decimales anidados
La lista invertida de los 10 mejores
Un solo reversed atributo hará el truco.
Viñetas de imagen
La mejor apuesta es usar un background-image en un pseudo-elemento. Pensarías list-style-image sería el camino a seguir, pero es extremadamente limitado. Por ejemplo, no puede colocarlo ni cambiar su tamaño.
Balas de emoji
Orden “aleatoria” seleccionada a mano
El value El atributo establecerá un elemento de la lista para usar el marcador relevante para esa posición.
Contadores de texto personalizados
Se puede hacer con pseudo-elementos para el mayor control, pero también hay list-style-type: '-';
Dentro vs. Afuera
Las cosas se alinean mejor con list-style-position: outside; (el valor predeterminado), pero los marcadores de lista se muestran fuera del cuadro, por lo que debe tener cuidado de no cortarlos. Podrían colgarse del borde de la ventana del navegador o overflow: hidden; los ocultará por completo. Los dos últimos ejemplos aquí tienen un truco para imitar la mejor alineación mientras se renderiza dentro del elemento.
Viñetas de colores
Tres formas aquí:
::marker(más nuevo y más fácil)- Estilo de pseudoelemento clásico
background-image(esta es una URL de datos SVG para que pueda manipular el color del CSS)
Lista en columnas
El número de columnas puede ser automático.
Números circulares de colores
Símbolos de lista de ciclismo personalizados
Las excepciones se pueden hacer con list-style: symbols() y juegos reutilizables se pueden hacer con @counter-style luego usado. Tenga en cuenta que esto solo es compatible con Firefox en el momento de escribir este artículo.