¿Cómo subrayar enlaces en WordPress como Softpedia?

ramonjosegn · 7 Feb 2018

Hola chicos/as.

Siempre me habían enseñado que los enlaces deberían tener algún tipo de "cambio" para que los visitantes comprendan que son interactivos.

Pero veo que ahora los themes de wordpress cada vez prescinden más de crear algún tipo de "efecto" sobre ellos.

Me preguntaba si es posible crearles subrayados, como hacen en este link de la web de Softpedia:

Internet Downloads

Me gustaría aplicar algo así a mi sitio web.

Gracias por la ayuda.

Pura Vida · 7 Feb 2018

Stylish Links ? WordPress Plugins :encouragement:

ramonjosegn · 7 Feb 2018

Pura Vida dijo:
Stylish Links ? WordPress Plugins :encouragement:

Gracias por responder. Pensé que estaba abandonado.

De todas formas cuando probé ese plugin también hacía cosas raras con los menús... claro que hace tiempo de eso, quizás lo hayan cambiado...

Le echaré un ojo más tarde. Gracias.

Luisin · 7 Feb 2018

Lo único que debes hacer es mediante css agregarle estilos:
Agregar un plugin para eso es demasiado...
:s
a:link{
text-decoration: underline;
}

denzel · 9 Feb 2018

solo necesitas una línea de css, a:hover{ text-decoration: underline }, y para que no cause problemas con los links del menú u otros links donde no quieras que se vea el subrayado podrías usar selectores como a:not(.menu-item):hover{ text-decoration: none } ...

ramonjosegn · 9 Feb 2018

Gracias por las recomendaciones [MENTION=34592]Luisin[/MENTION] y [MENTION=173141]denzel[/MENTION] - imagino que para no aplicarlas en el menú dependerá del theme y el CSS que hayan usado...

denzel · 9 Feb 2018

Sí, efectivamente, para que no apliquen al menú tienes que buscar en la hoja de estilos del theme las líneas que aplican a su enlaces (del menú), copiarlos y agregar una línea más para quitarles el underline.

Por ejemplo si el theme pone: .main-nav li a{ ...estilos del menu... }, copias .main-nav li a y le agregas ->{ text-decoration: none }

ultracobra · 9 Feb 2018

Luisin dijo:
Lo único que debes hacer es mediante css agregarle estilos:
Agregar un plugin para eso es demasiado...
:s
a:link{
text-decoration: underline;
}

Elegante solución.

Jean Carlos Sanchez · 7 Abr 2020

denzel dijo:
solo necesitas una línea de css, a:hover{ text-decoration: underline }, y para que no cause problemas con los links del menú u otros links donde no quieras que se vea el subrayado podrías usar selectores como a:not(.menu-item):hover{ text-decoration: none } ...

Muchas Gracias

agusmendez89 · 1 May 2022

Luisin dijo:
Lo único que debes hacer es mediante css agregarle estilos:
Agregar un plugin para eso es demasiado...
:s
a:link{
text-decoration: underline;
}

Una pregunta, como haces para que solo salga en una entrada y no en todos los links?
Gracias

agusmendez89 · 1 May 2022

agusmendez89 dijo:
Una pregunta, como haces para que solo salga en una entrada y no en todos los links?
Gracias

Me auto contesto por si alguno tiene la duda:

.entry-content {}

darkbits · 3 Jun 2022

Luisin dijo:
Lo único que debes hacer es mediante css agregarle estilos:
Agregar un plugin para eso es demasiado...
:s
a:link{
text-decoration: underline;
}

2 preguntitas:
1. Como se realiza para que siempre este subrayado el link? y cuando pasa el mouse des subraye y lo vuelva a subrayar el mismo momento como un destello (si es que se puede ) pero me conformo que siempre este subrayado para anunciar q hay un link?

2. y como puedo colocar una imagen hipervínculo a lado del link, o tengo que utilizar si o si plugin para hacer esto

mil gracias

agusmendez89 · 3 Jun 2022

darkbits dijo:
2 preguntitas:
1. Como se realiza para que siempre este subrayado el link? y cuando pasa el mouse des subraye y lo vuelva a subrayar el mismo momento como un destello (si es que se puede ) pero me conformo que siempre este subrayado para anunciar q hay un link?

2. y como puedo colocar una imagen hipervínculo a lado del link, o tengo que utilizar si o si plugin para hacer esto

mil gracias

Modificando el CSS pero dependiendo el theme que estés utilizando puede cambiar un poco. Si te paso un código puede cambiar.
Ejemplo para Generatepress:

.entry-content a, .entry-content a strong {
color: #CÓDIGOCOLOR !important;
border-bottom-style: solid !important;
border-bottom-width: 3px !important;
border-color: #COLORBORDE !important;
background-color:yellow; /*ColorFondo*/
}

En este caso es para links dentro de una entrada, te lo subraya con el código del color que le pongas y además tiene un color de fondo. Pero para otro theme puede ser que en lugar de ".entry-content" se utilice otro por ejemplo en asap si no me equivoco es ".the-content"

Espero te sirva!

ramonjosegn · 3 Jun 2022

Qué bueno que a otros/as usuarios/as les sirvan mis viejas consultas y que personas como @agusmendez89 colaboren en las respuestas.

¿Cómo subrayar enlaces en WordPress como Softpedia?

ramonjosegn

Pura Vida

ramonjosegn

Luisin

denzel

ramonjosegn

denzel

ultracobra

Jean Carlos Sanchez

agusmendez89

agusmendez89

darkbits

agusmendez89

ramonjosegn

Temas similares