Introducción
Personalizar las viñetas (bullets) de las listas en WordPress con SVG y CSS permite obtener iconos nítidos, escalables y fácilmente coloreables. El uso de SVG ofrece ventajas sobre imágenes rasterizadas: escalado sin pérdida, pequeño tamaño y posibilidad de usar currentColor para que las viñetas hereden el color del texto. Este artículo explica con todo lujo de detalles varias técnicas prácticas, ejemplos listos para usar y consideraciones específicas para integrarlo en temas y bloques de WordPress.
Conceptos básicos y recomendaciones
- Mantén la semántica: conserva la estructura ul/ol y li para accesibilidad y SEO.
- Decorativo vs informativo: trata las viñetas como elementos puramente decorativos —no sustituyas texto crítico por iconos— y evita insertar información exclusivamente visual.
- Colores: usa fill=currentColor en los SVG cuando quieras que la viñeta herede el color del li o del contenedor.
- Compatibilidad: muchas técnicas funcionan en los navegadores modernos, pero incluye un fallback sencillo (por ejemplo, list-style-type) para navegadores antiguos.
Métodos principales
1) list-style-image
La propiedad list-style-image acepta una URL (incluyendo data URI). Es el enfoque más directo pero ofrece menos control en cuanto a alineación y tamaño en comparación con pseudo-elementos.
2) Pseudo-elemento ::before (el método más flexible)
Eliminar la viñeta por defecto y usar li::before permite controlar tamaño, alineación, espaciado y responder a estados (:hover, :active) con mayor precisión.
3) ::marker
La pseudoclase ::marker está diseñada para la marca de lista. En navegadores modernos puede usarse para cambiar color y contenido, pero su soporte para imágenes y control fino es más limitado que ::before en algunos casos.
4) Máscara (mask-image) para colorear SVG vía color de fondo
Usar un SVG como máscara permite colorearlo con background-color o color, útil cuando el SVG solo define la forma y quieres controlar el color con CSS. Atención al soporte en navegadores (prefijos antiguos en algunos) y añade fallbacks.
Ejemplos prácticos
A continuación verás ejemplos listos para copiar. Recuerda que en WordPress puedes pegar estos CSS en Apariencia → Personalizar → CSS adicional, o incluirlos en tu CSS del tema/child theme.
Ejemplo 1 — Viñeta circular usando data URI SVG (método ::before)
.custom-list {
list-style: none
margin: 0
padding: 0
}
.custom-list li {
position: relative
padding-left: 1.6em / espacio para la viñeta /
color: #2a6f9e / color del texto y de la viñeta (por currentColor) /
}
.custom-list li::before {
content:
position: absolute
left: 0
top: 0.6em / ajustar verticalmente /
width: 1em
height: 1em
background-repeat: no-repeat
background-size: contain
/ SVG inline con fill=currentColor para heredar color /
background-image: url(data:image/svg xmlutf8,)
}
Notas: el SVG usa fill=currentColor para que la viñeta tenga el mismo color que el texto del li. Ajusta top y padding-left según la tipografía.
Ejemplo 2 — Viñeta tipo check (marca) y cambio de color al pasar el ratón
.check-list {
list-style: none
padding: 0
}
.check-list li {
position: relative
padding-left: 2em
color: #333
transition: color .15s ease
}
.check-list li::before {
content:
position: absolute
left: 0
top: 0.25em
width: 1.2em
height: 1.2em
background-repeat: no-repeat
background-size: contain
background-image: url(data:image/svg xmlutf8,)
}
.check-list li:hover {
color: #16a34a / la viñeta heredará este color en hover /
}
Ejemplo 3 — Usando mask-image para viñetas coloreables por background-color
.mask-list {
list-style: none
padding: 0
}
.mask-list li {
position: relative
padding-left: 1.8em
color: #111
}
.mask-list li::before {
content:
position: absolute
left: 0
top: 0.25em
width: 1.2em
height: 1.2em
background-color: currentColor / color de la forma /
-webkit-mask-repeat: no-repeat
-webkit-mask-size: contain
-webkit-mask-position: center
-webkit-mask-image: url(data:image/svg xmlutf8,)
/ estándar /
mask-repeat: no-repeat
mask-size: contain
mask-position: center
mask-image: url(data:image/svg xmlutf8,)
}
.mask-list li:hover::before {
background-color: #ff6b6b
}
Notas: mask-image usa la forma del SVG para recortar un fondo coloreado. En algunos navegadores es necesario usar prefijos -webkit- para compatibilidad.
Ejemplo 4 — Uso de ::marker (soporte limitado para imágenes)
/ Atención: la capacidad de ::marker para usar url() no es universal.
Úsalo donde sepas que el navegador objetivo lo soporta. /
.marker-list {
list-style: none
padding: 0 0 0 1.6em
}
.marker-list li::marker {
content: url(data:image/svg xmlutf8,)
/ color heredado del color del li si el navegador respeta currentColor aquí /
}
WordPress: dónde y cómo insertar el CSS
- Apariencia → Personalizar → CSS adicional: método rápido para sitios que no usan child theme o no quieren tocar archivos PHP.
- Child theme: añade el CSS en style.css del child theme para mantenerlo tras actualizaciones del tema padre.
- Encolar CSS desde functions.php: añade un archivo CSS y enquéalo con wp_enqueue_style. Ejemplo de cómo inyectar un CSS externo o inline a través de functions.php:
/ En functions.php de tu child theme /
function mi_tema_enqueue_custom_list_styles() {
wp_enqueue_style( mi-listas-svg, get_stylesheet_directory_uri() . /css/listas-svg.css, array(), 1.0 )
}
add_action( wp_enqueue_scripts, mi_tema_enqueue_custom_list_styles )
Si prefieres añadir un bloque de CSS inline desde PHP:
function mi_tema_inline_list_styles() {
css =
.custom-list{list-style:nonepadding:0}
.custom-list li{position:relativepadding-left:1.6emcolor:#2a6f9e}
.custom-list li::before{content:position:absoluteleft:0top:0.6emwidth:1emheight:1embackground-repeat:no-repeatbackground-size:containbackground-image:url(data:image/svg xmlutf8,)}
wp_add_inline_style( mi-tema-principal-handle, css )
}
add_action( wp_enqueue_scripts, mi_tema_inline_list_styles )
Nota: Para wp_add_inline_style necesitas conocer el handle (identificador) del CSS que ya esté encolado de lo contrario, encola primero tu hoja y luego añade el inline.
Gutenberg y bloques
- Si usas bloques (por ejemplo el bloque List de Gutenberg), puedes targetear .wp-block-list o .wp-block-latest-posts li en tu CSS.
- Para estilos de bloques dentro de un plugin o bloque personalizado, añade estilos en el archivo editor.css o style.css del bloque y registra esos estilos en el bloque.
Accesibilidad y buenas prácticas
- No conviertas una lista en una serie de divs para “tener más control” las listas semánticas son importantes.
- Las viñetas decorativas implementadas con background-image o pseudo-elementos son invisibles para lectores de pantalla y no necesitan atributos aria. Evita insertar texto crítico solo en imágenes de viñeta.
- Mantén suficiente contraste entre viñeta y fondo, especialmente cuando el color de la viñeta depende de currentColor y el contexto puede cambiar.
- Provee un fallback simple: list-style-type: disc para navegadores muy antiguos o cuando el SVG falla en cargarse.
Optimización del SVG
- Usa SVGs simples y elimina metadatos innecesarios (herramientas como SVGO ayudan).
- Para data URIs inline, minimiza y utiliza comillas simples en el SVG (o codifica el URI con encodeURIComponent) para evitar romper el CSS.
- Prefiere atributos fill=currentColor o stroke=currentColor para controlarlos desde CSS sin regenerar el SVG.
Compatibilidad y fallbacks
Prueba en Chrome, Firefox, Safari y Edge. ::before background-image con data URI funciona ampliamente. mask-image está bien en navegadores modernos pero algunos móviles/antiguos pueden no soportarlo. ::marker está evolucionando úsalo si conoces el entorno objetivo.
Checklist rápido antes de publicar
- Mantén ul/ol/li semánticos.
- Usa SVG con currentColor si quieres heredar color.
- Proporciona fallback (list-style-type) para navegadores antiguos.
- Verifica alineación y espaciado con distintas fuentes y tamaños.
- Prueba con lectores de pantalla si la lista transmite información importante.
Ejemplo final completo (HTML CSS)
Inserta el HTML en el editor (bloque HTML o en plantilla) y el CSS en tu hoja de estilos o CSS adicional.
- Elemento de lista uno
- Elemento de lista dos
- Elemento de lista tres
/ CSS asociado (agregar en style.css o CSS adicional) /
.custom-list{list-style:nonemargin:0padding:0}
.custom-list li{position:relativepadding-left:1.6emcolor:#245b8a}
.custom-list li::before{content:position:absoluteleft:0top:0.45emwidth:1emheight:1embackground-repeat:no-repeatbackground-size:containbackground-image:url(data:image/svg xmlutf8,)}
Resumen
Personalizar viñetas con SVG en CSS da resultados visuales profesionales y flexibles en WordPress. La técnica más robusta y controlable es usar li::before con data URIs de SVG que usen currentColor. Añade fallbacks, respeta la semántica y comprueba compatibilidad para asegurar una experiencia accesible y consistente. Con estos ejemplos puedes adaptar iconos, tamaños y colores a las necesidades de tu tema o bloque.
Leave a Reply