Introducción

Este tutorial explica, con todo lujo de detalles, cómo añadir líneas verticales entre los elementos del menú en WordPress usando únicamente CSS, con casos prácticos para diferentes estructuras de tema, compatibilidad RTL, responsive y accesibilidad. Se muestran varias técnicas —bordes, pseudo-elementos y reglas específicas para WordPress— y fragmentos de código listos para pegar en el CSS adicional del tema o en el fichero style.css del child theme.

Conceptos básicos y consideraciones

• Líneas decorativas: deben ser puramente visuales (pseudo-elementos o bordes). Evitar añadir caracteres visibles en el HTML para no afectar a lectores de pantalla.
• Evitar la última separación: usar selectores :not(:last-child) o li li para que la línea no aparezca después del último elemento.
• Estructura típica de WordPress: los menús suelen tener estructura ul.menu > li.menu-item > a. Ajusta los selectores al marcado de tu tema (.main-navigation, .nav-menu, .menu, etc.).
• Responsive: en móviles normalmente se ocultan o retiran las líneas porque el menú se muestra apilado.

Método 1 — Usando bordes (fácil)

Este método es el más directo: aplicar un border-left o border-right a cada elemento excepto al primero o al último. Funciona bien si tus elementos tienen altura uniforme y padding lateral consistente.

Ejemplo CSS básico

/ Selector genérico, adapta .main-navigation .menu a tu tema /
.main-navigation .menu > li {
  display: inline-block / o inline-flex según diseño /
  padding: 0 18px       / espacio alrededor del enlace /
}

/ Añade una línea a la izquierda de cada elemento excepto el primero /
.main-navigation .menu > li:not(:first-child) {
  border-left: 1px solid #d0d0d0
}

/ Opcional: separar visualmente el enlace del borde /
.main-navigation .menu > li > a {
  display: inline-block
  padding-left: 12px / empuja el texto lejos del borde /
  padding-right: 12px
  color: #222
  text-decoration: none
}

Ventajas y limitaciones

• Muy fácil y rápido.
• Si el elemento tiene fondo o altura variable, la línea se extiende todo el alto del li (a veces no deseado).
• En algunos temas con enlaces de bloque (a display:block) la línea puede quedar pegada al contenido ajustar padding corrige esto.

Método 2 — Usando pseudo-elementos (::before o ::after) (más control)

Los pseudo-elementos permiten colocar la línea en una posición concreta, controlar su altura, centrarla verticalmente y animarla en hover. Es la opción recomendada si quieres control visual total.

Ejemplo CSS con ::before y centrado vertical

/ Usar flex para que los elementos queden en una línea y sean centrables /
.main-navigation .menu {
  display: flex
  align-items: center
  list-style: none
  margin: 0
  padding: 0
}

/ Cada li actúa como contenedor relativo /
.main-navigation .menu > li {
  position: relative
  padding: 0 14px
}

/ Crea la línea únicamente en los elementos que no son el primero /
.main-navigation .menu > li   li::before {
  content: 
  position: absolute
  left: 0                 / en el borde izquierdo del li /
  top: 50%
  transform: translateY(-50%)
  width: 1px
  height: 60%             / controla la longitud de la línea /
  background: #c8c8c8
}

/ Si quieres que la línea cambie de color al pasar el ratón por el enlace adyacente /
.main-navigation .menu > li   li:hover::before,
.main-navigation .menu > li   li:focus-within::before {
  background: #333
}

Notas prácticas

• El selector li li crea la separación entre items sin necesidad de excluir el último explícitamente.
• height en porcentaje se refiere a la altura del li ajusta según tu diseño.
• Usar focus-within mejora la experiencia de teclado: la línea puede cambiar al enfocar el enlace.

WordPress: selectores comunes y dónde colocar el CSS

Los temas usan diferentes nombres de clase. Aquí algunos selectores habituales que puedes adaptar:

• .main-navigation .nav-menu
• .site-navigation .menu
• .primary-menu ul.menu
• .menu-primary-container ul.menu

Coloca el CSS en Personalizar → CSS adicional o en el archivo style.css de un child theme para que no se pierdan las modificaciones con las actualizaciones del tema.

Método 3 — Excluir separadores en submenús y menús desplegables

Si tu menú tiene submenús (dropdowns), normalmente quieres remover las líneas dentro de esos niveles o tratarlas distinto.

Ejemplo: desactivar separadores en submenús

/  Asume estructura ul.menu ul (submenú) /
.main-navigation .menu ul li   li::before,
.main-navigation .menu ul li:not(:first-child) {
  border: none
  background: transparent
}

/ O más específico: solo aplicar separadores en el primer nivel /
.main-navigation .menu > li   li::before {
  content: 
  position: absolute
  left: 0
  top: 50%
  transform: translateY(-50%)
  width: 1px
  height: 60%
  background: #bbb
}

Compatibilidad RTL (idiomas de derecha a izquierda)

En entornos RTL (árabe, hebreo) la dirección del separador debe invertirse: usar border-right o posicionar pseudo-elementos a la derecha. Detectarlo puede hacerse por el atributo dir en el HTML.

Ejemplos RTL y LTR

/  LTR por defecto /
html[dir=ltr] .main-navigation .menu > li   li::before {
  left: 0
  right: auto
}

/ RTL: coloca la línea a la derecha del elemento /
html[dir=rtl] .main-navigation .menu > li   li::before {
  right: 0
  left: auto
}

Responsive: ocultar separadores en pantallas pequeñas

En móviles los elementos suelen apilarse y las líneas verticales quedan fuera de lugar. Lo normal es ocultarlas con media queries.

Ejemplo: desactivar separadores a menos de 768px

@media (max-width: 767px) {
  .main-navigation .menu > li   li::before {
    display: none
  }
}

Accesibilidad y buenas prácticas

• Decorativo: usar pseudo-elementos o bordes CSS para que no afecte al DOM ni a lectores de pantalla.
• Contraste: asegúrate de que el color de la línea no genere confusión visual con el texto (WCAG recomienda buen contraste entre elementos interactivos y fondo).
• Interacción por teclado: si cambia la apariencia al :hover, añade :focus y :focus-within para usuarios de teclado.
• Animaciones sencillas: si animas la línea, usa transiciones cortas y evita animaciones que causen mareo.

Cómo añadir una clase a los elementos del menú desde functions.php (opcional)

Si prefieres controlar con clases en lugar de selectores CSS complejos, puedes añadir una clase a cada item mediante un filtro. El siguiente fragmento añade la clase menu-has-sep a los elementos de primer nivel.

Luego en CSS puedes apuntar a .main-navigation .menu > li.menu-has-sep .menu-has-sep::before o sencillamente a .main-navigation .menu > li li::before si no necesitas la clase.

Problemas comunes y soluciones rápidas

1. La línea aparece dentro del dropdown: asegúrate de limitar el selector al primer nivel (usar > li o :not(.sub-menu) según la estructura).
2. La línea no se centra verticalmente: comprueba que el li tiene altura establecida o usa top:50% con transform: translateY(-50%).
3. Separador ocupa toda la altura del li: reduce la propiedad height del pseudo-elemento a un porcentaje o valor fijo.
4. En dispositivos móviles los items quedan apilados con líneas entre ellos: ocultar los separadores con media queries.
5. El tema usa display:block en enlaces de menú: adapta el posicionamiento (usar padding en el y position:relative en el li).

/  Línea por defecto transparente /
.main-navigation .menu > li   li::before {
  content: 
  position: absolute
  left: 0
  top: 50%
  transform: translateY(-50%)
  width: 2px
  height: 0                 / inicialmente invisible /
  background: #0073aa
  transition: height 180ms ease, opacity 180ms ease
  opacity: 0
}

/ Al pasar sobre el li adyacente, la línea crece /
.main-navigation .menu > li   li:hover::before,
.main-navigation .menu > li   li:focus-within::before {
  height: 70%
  opacity: 1
}

/ Ejemplo compacto y genérico: ajusta .main-navigation .menu según tu tema /
.main-navigation .menu {
  display: flex
  align-items: center
  list-style: none
  margin: 0
  padding: 0
}

.main-navigation .menu > li {
  position: relative
  padding: 0 16px
}

/ Línea entre items (primer nivel) /
.main-navigation .menu > li   li::before {
  content: 
  position: absolute
  left: 0
  top: 50%
  transform: translateY(-50%)
  width: 1px
  height: 60%
  background: rgba(0,0,0,0.12)
}

/ Ocultar en móviles /
@media (max-width: 767px) {
  .main-navigation .menu > li   li::before {
    display: none
  }
}

/ RTL /
html[dir=rtl] .main-navigation .menu > li   li::before {
  right: 0
  left: auto
}