Tutorial WordPress: Estilos para listas de verificación con iconos usando CSS ::before

Introducción

Este artículo explica con todo lujo de detalles cómo crear estilos para listas de verificación en WordPress utilizando pseudo-elementos CSS ::before. Cubriremos desde la versión más simple (iconos estáticos con Unicode) hasta listas interactivas y accesibles (checkbox real y animaciones), además de cómo integrar icon fonts o SVG, y dónde colocar el CSS en WordPress.

Conceptos básicos

La técnica principal consiste en aplicar reglas a los elementos de lista (por ejemplo ul.checklist li) y usar ::before para insertar el icono visual. Esto evita modificar el HTML dentro de cada ltligt y mantiene el marcado limpio. Para listas interactivas, conviene utilizar inputs reales (input[type=checkbox]) por accesibilidad y control.

Ventajas

Separación entre contenido y presentación.
Facilidad para cambiar iconos sin tocar HTML.
Posibilidad de animaciones y estados (checked/unchecked).
Compatible con WordPress si se añade correctamente el CSS o se encola como recurso.

Ejemplo 1 — Lista simple con iconos Unicode

Uso más directo: inserta un carácter Unicode (por ejemplo ✔ o ✓) mediante content. Ideal para listas estáticas o artículos con marca visual.

/ CSS para una lista de verificación simple /
ul.checklist {
  list-style: none
  margin: 0
  padding: 0
}
ul.checklist li {
  position: relative
  padding-left: 28px / espacio para el icono /
  margin: 0 0 8px 0
  line-height: 1.4
}
ul.checklist li::before {
  content: 2714 / carácter Unicode: ✔ /
  position: absolute
  left: 0
  top: 0
  color: #2a9d8f
  font-weight: 700
  font-size: 16px
  line-height: 1
}

HTML mínimo (insertar en editor de bloques o código):


  Instalar y configurar el tema
  Crear las páginas principales
  Configurar menús y widgets

Ejemplo 2 — Icono personalizado con imagen/SVG

Si prefieres usar un SVG o PNG a la izquierda, el pseudo-elemento puede tener un background-image. Esto permite iconos más complejos sin añadir elementos extras en el HTML.

ul.checklist-img {
  list-style: none
  padding: 0
  margin: 0
}
ul.checklist-img li {
  position: relative
  padding-left: 36px
  margin-bottom: 10px
}
ul.checklist-img li::before {
  content: 
  position: absolute
  left: 0
  top: 0
  width: 24px
  height: 24px
  background-image: url(/wp-content/uploads/icons/check.svg)
  background-size: contain
  background-repeat: no-repeat
}

Ejemplo 3 — Lista interactiva accesible (input[type=checkbox])

Para listas que el usuario puede marcar, use inputs reales y oculte visualmente el checkbox nativo. Mantener el input en el DOM preserva la accesibilidad y el foco. El pseudo-elemento del label o del li se usa para el icono.

HTML típico:


  
    
    Revisar ajustes de SEO
  
  
    
    Optimizar imágenes

CSS asociado:

/ Oculta el checkbox pero lo deja accesible /
.checklist-interactive input[type=checkbox] {
  position: absolute
  opacity: 0
  width: 1px
  height: 1px
  margin: -1px
  overflow: hidden
  clip: rect(0 0 0 0) / técnica para ocultar visualmente /
}

/ Estilo del label con pseudo-elemento para el icono /
.checklist-interactive label {
  display: inline-block
  cursor: pointer
  position: relative
  padding-left: 34px
  line-height: 1.6
}

/ Icono no marcado /
.checklist-interactive label::before {
  content: 
  position: absolute
  left: 0
  top: 50%
  transform: translateY(-50%)
  width: 20px
  height: 20px
  border: 2px solid #b0bec5
  border-radius: 4px
  background: white
  transition: all 0.18s ease
}

/ Icono marcado: puedes usar un SVG como background o un carácter /
.checklist-interactive input[type=checkbox]:checked   label::before {
  background-color: #2a9d8f
  border-color: #2a9d8f
  box-shadow: 0 0 0 3px rgba(42,157,143,0.12)
  background-image: url(/wp-content/uploads/icons/check-white.svg)
  background-repeat: no-repeat
  background-position: center
  background-size: 12px 12px
}

Notas de accesibilidad

Usa input nativo cuando sea posible para que los lectores de pantalla y el teclado funcionen sin trabajo adicional.
Si implementas una solución pura con roles ARIA y elementos no nativos, asegúrate de gestionar focus, teclas (Espacio/Enter) y actualizar aria-checked.
Evita ocultar el input con display:none o visibility:hidden, ya que puede romper la accesibilidad usa la técnica de clipping mostrada arriba.

Integración de icon fonts (ej. Font Awesome) en WordPress

Si prefieres icon fonts, encola la hoja desde functions.php o usa el personalizador. Ejemplo de encolado:

Luego en CSS puedes usar el icono de Font Awesome con content usando la referencia unicode correcta o añadiendo un ltigt en el HTML. Ejemplo usando pseudo-elemento:

ul.fa-checklist li::before {
  font-family: Font Awesome 6 Free
  font-weight: 900 / depende del set /
  content: f00c / check icon de Font Awesome /
  color: #2a9d8f
  position: absolute
  left: 0
  font-size: 16px
}

Animaciones y microinteracciones

Pequeñas transiciones aumentan la sensación de calidad. Ejemplo: animar la aparición del check con transform y opacity.

.checklist-interactive label::after {
  content: 2714
  position: absolute
  left: 4px
  top: 50%
  transform: translateY(-50%) scale(0.6)
  color: white
  opacity: 0
  transition: transform 0.18s ease, opacity 0.18s ease
  font-size: 12px
}

/ Al marcarlo, mostramos y ampliamos el icono /
.checklist-interactive input[type=checkbox]:checked   label::after {
  opacity: 1
  transform: translateY(-50%) scale(1)
}

Donde colocar el CSS en WordPress

Usar el panel Apariencia → Personalizar → CSS adicional: rápido y efectivo.
Añadir al archivo style.css del tema hijo: recomendable si controlas el tema y quieres versión controlada.
Encolar un archivo CSS propio mediante functions.php para mantener mejores prácticas y caché controlado.

Compatibilidad y buenas prácticas

Propiedad	Uso
content	Inserta iconos Unicode o vacíos para backgrounds. Requiere pseudo-elementos (::before/::after).
background-image	Usar para SVG/PNG cuando necesitas iconos detallados.
font-family	Para icon fonts (Font Awesome, etc.).
input[type=checkbox]	Mantén inputs nativos para accesibilidad y soporte de teclado.

Sugerencias de compatibilidad

Prueba en navegadores móviles y de escritorio. Los pseudo-elementos son ampliamente soportados, pero algunos hacks para ocultar inputs pueden afectar.
Evita depender exclusivamente de icon fonts si tu público bloquea recursos externos considera SVG inline o local.
Minimiza imágenes y SVGs para mejorar rendimiento.

Ejemplo completo práctico

Este bloque reúne HTML CSS para una lista interactiva que puedes pegar en un bloque HTML y encolar el CSS en tu theme o Custom CSS.


  
    
    Configurar título y meta
  
  
    
    Instalar plugin de caché
  
  
    
    Revisar versión móvil

.checklist-interactive {
  list-style: none
  padding: 0
  margin: 0
}
.checklist-interactive li {
  margin-bottom: 12px
  position: relative
}

/ Oculta visualmente pero mantiene accesibilidad /
.checklist-interactive input[type=checkbox] {
  position: absolute
  opacity: 0
  width: 1px
  height: 1px
  margin: -1px
  clip: rect(0 0 0 0)
  overflow: hidden
}

/ Label y caja /
.checklist-interactive label {
  display: inline-block
  cursor: pointer
  padding-left: 42px
  line-height: 1.6
  position: relative
}

/ Caja del checkbox /
.checklist-interactive label::before {
  content: 
  position: absolute
  left: 0
  top: 50%
  transform: translateY(-50%)
  width: 28px
  height: 28px
  border-radius: 6px
  border: 2px solid #cfd8dc
  background: white
  transition: all .18s ease
}

/ Marca animada /
.checklist-interactive label::after {
  content: 2714
  position: absolute
  left: 6px
  top: 50%
  transform: translateY(-50%) scale(0.7)
  color: white
  opacity: 0
  transition: transform .18s ease, opacity .18s ease
  font-size: 14px
}

/ Estado marcado /
.checklist-interactive input[type=checkbox]:checked   label::before {
  background-color: #2a9d8f
  border-color: #2a9d8f
}
.checklist-interactive input[type=checkbox]:checked   label::after {
  opacity: 1
  transform: translateY(-50%) scale(1)
}

Errores comunes y cómo solucionarlos

No se ven los iconos: comprobar que el selector coincide con la clase del ltulgt y que el CSS se está cargando en la página.
Checkbox no accesible: evita display:none en inputs usa técnicas de ocultamiento accesible.
Icono con Font Awesome no aparece: asegurar que la fuente está encolada antes del CSS que la usa y usar el nombre correcto de la font-family y unicode.
Problemas en caché: limpia caché de plugins y del navegador tras realizar cambios.

Conclusión

Las listas de verificación con iconos usando ::before son una solución elegante y flexible para WordPress, que ofrece desde diseños estáticos con Unicode hasta soluciones interactivas accesibles con input real. Elige la técnica según tus necesidades: simplicidad (Unicode), diseño preciso (SVG/imagen) o interactividad y accesibilidad (input label). Coloca el CSS en el lugar más adecuado para tu flujo de trabajo (Customizer, tema hijo, o encolado) y prueba en dispositivos y lectores de pantalla.

SushiHost