Introducción

Este tutorial explica, paso a paso y con ejemplos listos para pegar, cómo añadir un borde inferior a los títulos de widgets en WordPress únicamente cuando la web se visualiza en desktop. Cubriremos cómo identificar el selector correcto, varias técnicas CSS (borde directo y pseudo-elemento para líneas cortas), cómo restringir la regla a pantallas de escritorio con media queries y cómo aplicar el CSS en WordPress (Customizer, child theme o encolando un archivo). También veremos cómo dirigirse a widgets concretos y consejos de accesibilidad y pruebas.

Antes de empezar: comprobar la estructura HTML del tema

Abre el inspector de tu navegador (Ctrl Shift I / Cmd Opt I), localiza la barra lateral o área de widgets y observa el marcado del título. Los temas suelen usar uno de estos patrones:

• .widget .widget-title (o .widget .widgettitle)
• .widget gt h3, h4.widget-title o h2.widget-title
• o un ID concreto para un widget: #categories-2 .widget-title

Apuntar al selector correcto es crucial si te equivocas, el CSS no se aplicará o afectará elementos no deseados.

1) Solución simple: borde inferior solo en desktop

Esta es la forma más directa: añadimos una regla CSS dentro de una media query que solo aplica a anchuras de pantalla de escritorio. Ajusta el min-width según el breakpoint que use tu tema (1024px es común).

@media (min-width: 1024px) {
  / Selector general: ajusta si tu tema usa otro nombre /
  .widget .widget-title,
  .widget-title {
    border-bottom: 2px solid #333 / color y grosor /
    padding-bottom: 0.6rem       / espacio entre texto y línea /
    margin-bottom: 1rem          / separación debajo del título /
    display: inline-block        / hace que la línea abarque solo el ancho del texto /
  }
}

2) Línea corta decorativa con pseudo-elemento

Si prefieres una pequeña regla (por ejemplo 40px) bajo el título en lugar de un borde que ocupe todo el ancho, usa un :after. Así puedes controlar longitud, color y posición sin cambiar el flujo del documento.

@media (min-width: 1024px) {
  .widget .widget-title {
    position: relative
    padding-bottom: 0.6rem
    display: inline-block
  }
  .widget .widget-title:after {
    content: 
    position: absolute
    left: 0                / alinear a la izquierda del título /
    bottom: 0
    width: 40px            / longitud de la línea /
    height: 3px            / grosor /
    background: #ff385c    / color de la línea /
    border-radius: 2px
  }
}

3) Centrar o alinear la línea

Para centrar la línea bajo el título o alinear a la derecha, cambia left y usa transform:

@media (min-width: 1024px) {
  .widget .widget-title {
    position: relative
    padding-bottom: 0.6rem
    text-align: center / si el título ocupa todo el ancho del contenedor /
  }
  .widget .widget-title:after {
    content: 
    position: absolute
    left: 50%
    transform: translateX(-50%) / centra la línea /
    bottom: 0
    width: 60px
    height: 3px
    background: #222
  }
}

4) Aplicar a widgets concretos

Si solo quieres la línea en un widget específico (por ejemplo el widget de texto con ID text-3 o el de categorías categories-2), usa el ID del widget que viste en el inspector:

@media (min-width: 1024px) {
  / Solo en el widget concreto /
  #text-3 .widget-title,
  #categories-2 .widget-title {
    border-bottom: 2px solid #000
    display: inline-block
    padding-bottom: 0.5rem
  }
}

5) Dónde añadir este CSS en WordPress

1. Customizer → Additional CSS: rápido y seguro para cambios rápidos.
2. Child theme → style.css: si tienes un child theme, pega el CSS en su style.css para permanencia y control de versiones.
3. Encolar un archivo CSS: si prefieres tener un archivo separado, crea widget-titles.css y encola desde functions.php. Ejemplo:

function mi_tema_enqueue_custom_styles() {
  wp_enqueue_style( mi-estilo-widget-titles, get_stylesheet_directory_uri() . /widget-titles.css, array(), 1.0 )
}
add_action( wp_enqueue_scripts, mi_tema_enqueue_custom_styles )

6) Consejos prácticos y compatibilidad

• Si tu tema usa .widgettitle.widget-title, adapta el selector.
• Al usar display:inline-block la línea se limita al ancho del texto si quieres la línea al 100% del contenedor, usa display:block y width:100%.
• Si el tema aplica estilos con más especificidad, aumenta la especificidad o utiliza !important con moderación. Mejor: copiar la cadena de selectores completa del inspector y adaptarla.
• El breakpoint (1024px) es orientativo si tu tema define otro, úsalo para coherencia.
• Prueba siempre con caché desactivada o vaciando la caché después de aplicar cambios.

7) Accesibilidad y diseño

El borde o la línea son elementos puramente visuales y no afectan a la lectura por pantalla si no cambias el DOM. Asegúrate de:

• Contraste suficiente entre color de línea y fondo.
• No depender únicamente del color para transmitir información importante.
• Que el espacio adicional no rompa el espaciado vertical en mobile (por eso limitamos el efecto a desktop).

8) Diagnóstico rápido si no funciona

1. Comprueba que el selector coincide exactamente con el HTML del título.
2. Confirma que la media query se cumple (ajusta el min-width si tu viewport es más grande/pequeño).
3. Revisa si otro CSS con mayor especificidad está sobrescribiendo tu regla (usa inspector para ver reglas aplicadas).
4. Vacia la caché del sitio y la del navegador.

Checklist final antes de publicar

• Selector validado con el inspector
• Media query adaptada al breakpoint del tema
• Regla añadida en Customizer, child theme o encolada correctamente
• Prueba en diferentes resoluciones y en dispositivos reales
• Control de caché y accesibilidad revisados

Ejemplo completo (para pegar en Additional CSS)

/ Borde inferior en títulos de widgets solo en pantallas de escritorio /
@media (min-width: 1024px) {
  .widget .widget-title,
  .widget-title {
    border-bottom: 2px solid #2b2b2b
    padding-bottom: 0.6rem
    margin-bottom: 1rem
    display: inline-block
  }
}

Con esto tendrás un borde inferior que se aplica exclusivamente en vistas de escritorio, sin afectar la presentación móvil. Ajusta colores, grosores y breakpoints a tu gusto.