¿Cómo eliminar el subrayado de los anclajes (enlaces)?

313

¿Hay alguna forma (en CSS) para evitar el subrayado del texto y los enlaces introducidos en la página ...?

Steven
fuente
8
<penantic> Nunca puede suponer cómo un navegador representará su HTML. una etiqueta representa un ancla que el navegador elige mostrar como subrayado de forma predeterminada. u es la única etiqueta de subrayado. las respuestas a continuación son respuestas CSS </pendantic>
cuenta muerta el
44
La ironía de que alguien sea lo suficientemente pedante como para hacer este comentario, pero no lo suficientemente pedante como para deletrear la palabra correctamente (¡o incluso consistentemente!) Me deja sin aliento.
Technetium
Además de las respuestas a continuación, a:hovertambién se debe considerar el manejo , los navegadores más populares tienden a mostrar un subrayado en las anclas al desplazarse.
Fr0zenFyr

Respuestas:

517

Usa CSS. Esto elimina los subrayados ay uelementos:

a, u {
    text-decoration: none;
}

A veces necesita anular otros estilos para los elementos, en cuyo caso puede usar el !importantmodificador en su regla:

a {
    text-decoration: none !important;
}
Emil Vikström
fuente
1
Si color: black !important;se agregara body, ¿eso también establecerá que todos los elementos, incluidos los anclajes, los anclajes visitados, los anclajes suspendidos sean siempre negros?
Ωmega
Ωmega Δ, aparentemente no, y gracias a que lo señaló, encontré un error en la regla general del cuerpo. He actualizado mi respuesta.
Emil Vikström
Lo que encontré es que si configura el estilo text-decoration: none !important;para el bodyelemento, entonces funciona para los anclajes solo cuando configura explícitamente el estilo text-decoration: inherit;para los aelementos.
Ωmega
77
En general, es mejor evitar !importanty usar la especificidad y la cardinalidad para anular los estilos, de lo contrario, puede terminar con una hoja de estilos llena !importantsin ningún conocimiento de la estructura que lo hace necesario. Es un código de olor IMO.
Mike Lyons
!importantEs como tener una bomba nuclear. Pero una vez que comienzas y te seduces para usar !importantotros elementos, puedes obtenerlo (arma nuclear) y la ventaja se ha ido a favor de un callejón sin salida, que es genial para el mundo, ya que MUD garantiza la paz, pero en el mundo de CSS, tal paz significa que no puedes dar algo a la ventaja.
JasonGenX
27

El css es

text-decoration: none;

y

text-decoration: underline;
DanDan
fuente
16

Esto eliminará su color, así como el subrayado con el que existe la etiqueta de anclaje.

 a {
     text-decoration: none ;
  }
a:hover
  {
    color:white;
    text-decoration:none;
    cursor:pointer;
   }
Ashwin Shahi
fuente
11

La opción más simple es esta:

<a style="text-decoration: none">No underline</a>

Por supuesto, mezclar CSS con HTML (es decir, CSS en línea) no es una buena idea, especialmente cuando usa aetiquetas por todas partes.
Por eso es una buena idea agregar esto a una hoja de estilo:

a {
    text-decoration: none;
}

O incluso este código en un archivo JS:

var els = document.getElementsByTagName('a');

for (var el = 0; el < els.length; el++) {
    els[el].style["text-decoration"] = "none";
}
XLogic
fuente
Iphone / Android no son buenos puntos de referencia, ya que no representan la representación HTML hacia atrás de Gmail o Outlook.
Stuart
@XLogic: Muchas gracias
Monika Patel
6

Use CSS para eliminar text-decorations.

a {
    text-decoration: none;
}
Alan Haggai Alavi
fuente
6

La mejor opción para usted si solo desea eliminar el subrayado solo del enlace de anclaje-

    #content a{
                text-decoration-line:none;
                }

Esto eliminará el subrayado.

Además, puede usar una sintaxis similar para manipular otros estilos también usando-

                text-decoration: none;
                text-decoration-color: blue;
                text-decoration-skip: spaces;
                text-decoration-style: dotted;

¡Espero que esto ayude!

PD: ¡ esta es mi primera respuesta!

Praveen Kaushik
fuente
4

en mi caso, había una regla sobre el efecto de desplazamiento del ancla, como esta:

#content a:hover{
border-bottom: 1px solid #333;
}

Por supuesto, text-decoration:none;no podría ayudar en esta situación. Y paso mucho tiempo hasta que lo descubrí.

Entonces: Un guión bajo no debe confundirse con un borde inferior.

Aleksandr Khomenko
fuente
4

En algún momento se anulará al representar CSS UI. Mejor usar:

a.className {
    text-decoration: none !important;
}
Sanjib Karmakar
fuente
1
Esta es una idea terrible. stackoverflow.com/questions/8360190/…
Benjamin Gruenbaum
2

Para proporcionar otra perspectiva al problema (como se infiere del título / contenido de la publicación original):

Si desea rastrear lo que está creando subrayados falsos en su HTML, use una herramienta de depuración. Hay mucho de donde escoger:

Para Firefox hay FireBug;

Para Opera hay Dragonfly (llamado "Herramientas de desarrollo" en el menú Herramientas-> Avanzado; viene con Opera por defecto);

Para IE existe la "Barra de herramientas para desarrolladores de Internet Explorer", que es una descarga separada para IE7 y versiones posteriores, y está integrada en IE8 (presione F12).

No tengo idea acerca de Safari, Chrome y otros navegadores minoritarios, pero de todos modos probablemente debería tener al menos uno de los tres anteriores en su máquina.

Vilx-
fuente
1

Cuando desee utilizar una etiqueta de anclaje simplemente como un enlace sin el estilo agregado (como el subrayado al pasar el mouse o el color azul), agréguelo class="no-style"a la etiqueta de anclaje. Luego, en su hoja de estilo global, cree la clase "sin estilo".

.no-style { text-decoration: none !important; }

Esto tiene dos ventajas.

  1. No afectará a todas las etiquetas de anclaje, solo a las que tengan agregada la clase "sin estilo".
  2. Anulará cualquier otro estilo que, de lo contrario, pueda evitar establecer la decoración de texto en ninguna.
Frederick John
fuente
0

No olvide incluir hojas de estilo usando la etiqueta de enlace

http://www.w3schools.com/TAGS/tag_link.asp

O incluya CSS dentro de una etiqueta de estilo en su página web.

<style>
  a { text-decoration:none; }
  p { text-decoration:underline; }
</style>

No recomendaría usar el subrayado en nada aparte de los enlaces, el subrayado generalmente se acepta como algo en el que se puede hacer clic. Si no se puede hacer clic, no lo subraye.

Los conceptos básicos de CSS se pueden recoger en w3schools

JasonS
fuente
0
<u>

es una etiqueta obsoleta

Utilizar...

<span class="underline">My text</span>

con un archivo CSS que contiene ...

span.underline
{
    text-decoration: underline;
}  

o solo...

<span style="text-decoration:underline">My Text</span>
Sin fin
fuente
0

Use la propiedad css,

text-decoration:none;

Para eliminar subrayado del enlace.

Smita Kagwade
fuente
0

El subrayado puede eliminarse mediante una propiedad CSS llamada decoración de texto.

<style>
a{
text-decoration:none;
}
</style>

Si desea eliminar el subrayado del texto presente en los elementos que no sean a , se debe utilizar la siguiente sintaxis.

<style>
element-name{
text-decoration:none;
}
</style>

Hay muchos otros valores de decoración de texto que pueden ayudarlo a diseñar enlaces.

Sheraz
fuente
-1

He tenido problemas con este problema en la impresión web y lo he resuelto. Resultado verificado

a {
    text-decoration: none !important;
}

¡Funciona!.

Incheol
fuente