Genera estilos de lista CSS con vista previa en vivo. Elige entre viñetas estándar, números, emojis, imágenes personalizadas y más. Copia el código CSS al instante. Cliente puro.
El estilo de lista CSS controla cómo se marcan los elementos de la lista. Este generador te permite previsualizar todos los tipos de lista CSS estándar y crear marcadores personalizados con emojis, iconos o imágenes. El CSS generado utiliza el pseudo-elemento ::marker para navegadores modernos con soporte de respaldo.
El pseudo-elemento ::marker apunta al cuadro de marcador de un elemento de lista. Te permite estilizar viñetas y números con colores, fuentes y tamaños personalizados. Los navegadores modernos soportan ::marker, pero el generador también proporciona CSS de respaldo para navegadores antiguos.
Sí, puedes usar la propiedad list-style-image o el pseudo-elemento ::marker con content. El generador soporta ambos enfoques. Para mejores resultados, usa imágenes SVG o PNG pequeñas (16x16px a 24x24px).
El pseudo-elemento ::marker es soportado en todos los navegadores modernos incluyendo Chrome 86+, Firefox 68+, Safari 11.1+ y Edge 86+. Para navegadores antiguos, el generador proporciona CSS de respaldo usando propiedades estándar de list-style.
Usa el pseudo-elemento ::marker con la propiedad color. El CSS generado incluye esto automáticamente. Para listas ordenadas, esto cambia el color de los números manteniendo el texto del elemento en su color original.