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

218

¿Hay alguna manera (en CSS) para evitar el subrayado para el texto y los enlaces introducidos en la página ..?¿Cómo eliminar el subrayado de los anclajes (enlaces)?

Fuente

2010-01-11 Steven

Nunca puede suponer cómo un navegador representará su HTML. una etiqueta representa un delimitador 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 –

+25

La ironía de que alguien es lo suficientemente pedante como para hacer este comentario, pero no lo suficientemente pedante como para deletrear la palabra correctamente (¡o incluso consistentemente!) me deja boquiabierto. – Technetium

369

uso de CSS. esto elimina los subrayados de a y u elementos:

a, u { 
    text-decoration: none; 
}

A veces es necesario para anular otros estilos para elementos, en cuyo caso se puede utilizar el modificador !important en su regla:

a { 
    text-decoration: none !important; 
}

Fuente

2010-01-11 11:11:49

If 'color: black!importante; 'se agregaría para 'cuerpo', ¿eso también establecerá todos los elementos, incluidos anclajes, anclajes visitados, anclajes suspendidos para que siempre sean negros? –

Ωmega Δ, al parecer no, y gracias a que lo señaló, encontré un error en la regla del cuerpo en general. He actualizado mi respuesta. –

Lo que encontré es que si estableces el estilo 'text-decoration: none! Important;' para el elemento 'body', entonces funciona para anclajes solo cuando defines explícitamente el estilo' text-decoration: inherit; 'for' a' elements . –

Utilice CSS para eliminar text-decoration s.

a { 
    text-decoration: none; 
}

Fuente

2010-01-11 11:10:38

El CSS es

text-decoration: none;

text-decoration: underline;

Fuente

2010-01-11 11:10:46 DanDan

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

Si desea rastrear qué está creando subrayados deshonestos en su HTML, use una herramienta de depuración. Hay mucho para elegir:

Para Firefox hay FireBug;

Para Opera hay Dragonfly (llamado "Herramientas de desarrollador" 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 posterior, y está integrada en IE8 (pulse F12).

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

Fuente

2010-01-11 11:37:08

Safari 3/4: http://www.macobserver.com/tmo/article/Safari_3.1_The_Magical_Develop_Menu/ – mplungjan

No se olvide de incluir hojas de estilo, ya sea utilizando la etiqueta de enlace

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

o incluir CSS dentro de una etiqueta de estilo en su página web.

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

yo no recomendaría el uso del subrayado en nada, aparte de enlaces, subrayado es generalmente aceptado como algo que se puede hacer clic. Si no se puede hacer clic, no lo subraye.

básico CSS pueden ser recogidos en w3schools

Fuente

2010-01-11 11:53:59 JasonS

<u>

es una etiqueta obsoleta.

uso ...

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

con un archivo CSS que contiene ...

span.underline 
{ 
    text-decoration: underline; 
}

o simplemente ...

<span style="text-decoration:underline">My Text</span>

Fuente

2010-01-11 12:36:43

mejor opción:

&lt;a name="#" style="text-decoration:none" &gt;2000001&lt;/a&gt; 

<a style="text-decoration:none" name="#">2000001</a>

probado en IPHONE, ANDROIDbrowser/email - funciona como un encanto.

Fuente

2013-05-17 19:11:01 XLogic

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 –

Alguna vez se anulará mediante la renderización de UI CSS. Mejor utilizar:

a.className { 
    text-decoration: none !important; 
}

Fuente

2013-07-30 06:32:12

Esta es una idea terrible. http://stackoverflow.com/questions/8360190/is-it-bad-to-use-important-in-css-property –

en mi caso no era una regla sobre asomar-efecto por el ancla, como esto:

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

Por supuesto, text-decoration:none; no podí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.

Fuente

2015-05-01 12:13:41

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

a { 
    text-decoration: none ; 
    } 
a:hover 
    { 
    color:white; 
    text-decoration:none; 
    cursor:pointer; 
    }

Fuente

2015-11-10 09:10:16

mejor opción para usted si lo que desea es eliminar el subrayado de vínculo de anclaje solamente-

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

Esto eliminará el subrayado.

Además puede utilizar la sintaxis similar para la manipulación de otros estilos también using-

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

Espero que esto ayude!

P.S.- ¡Esta es mi primera respuesta!

Fuente

2017-03-28 02:37:47

Cuando desee utilizar una etiqueta de anclaje simplemente como un enlace sin el estilo agregado (como el subrayado en el vuelo estacionario o el color azul) agregue class="no-style" a la etiqueta de anclaje. Luego, en su hoja de estilos global, cree la clase "sin estilo".

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

Esto tiene dos ventajas.

No afectará a todas las etiquetas de anclaje, solo las que tengan la clase "sin estilo" agregada.
Anulará cualquier otro estilo que de otro modo podría impedir configurar la decoración de texto en ninguno.

Fuente

2017-12-05 20:01:49

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

Respuesta

Cuestiones relacionadas