¿Cómo eliminar subrayado de un enlace en HTML?

130

En mi página he puesto algunos enlaces debajo de los cuales no quiero ninguna línea, entonces, ¿cómo puedo eliminar eso usando HTML?

html Paic Ten
fuente
44
Paic, no me voy a molestar en deshacer las etiquetas nuevamente, pero para que lo sepas, la única forma de eliminar el subrayado es con CSS . Sí, aunque lo esté agregando en línea con el HTML (en el styleatributo), sigue siendo CSS . Las otras dos etiquetas también son completamente válidas ( presentationy hyperlink). En el futuro, no elimine (ni agregue) etiquetas a una pregunta a menos que haya una razón válida para hacerlo. ¡Gracias!
0b10011
@bfrohs Respeto sus palabras, pero estoy construyendo mi sitio usando solo HTML y, por lo tanto, no agregué más etiquetas porque si lo hubiera hecho, podría haber obtenido respuestas para diferentes idiomas. En realidad soy un poco novato, esa es la razón.
Paic Ten
3
No puede crear un sitio web que cumpla con los estándares sin CSS (a menos que vaya con los valores predeterminados del navegador para todas las presentaciones). HTML = estructura; CSS = presentación. Las otras etiquetas no tenían nada que ver con un idioma diferente: solo se proporcionaron para ayudar a las personas a encontrar la pregunta y la respuesta.
0b10011
1
posible duplicado de ¿Cómo eliminar el subrayado de los anclajes (enlaces)?
RAS
2
¿Por qué esta pregunta tiene tantos votos? Literalmente puede responderlo en una sola búsqueda en Google y estoy seguro de que hay muchos duplicados en StackOverflow.
Alternatex

Respuestas:

192

Versión en línea :

<a href="http://yoursite.com/" style="text-decoration:none">yoursite</a>

Sin embargo, recuerde que generalmente debe separar el contenido de su sitio web (que es HTML ) de la presentación (que es CSS ). Por lo tanto, generalmente debe evitar los estilos en línea .

Vea la respuesta de John para ver una respuesta equivalente usando CSS .

patryk.beza
fuente
1
¡asesino! Nunca vi estas líneas de subrayado en todos los años que estuve haciendo html ... ^^
Alex Cio
1
La respuesta de John todavía usa estilos esencialmente en línea. Separar su CSS significa más que alias css en su html. Por ejemplo, class="big-and-red"aliasing no seperation. class="meaningful-domain-item"entonces css .meaningful-domain-item { //big and red }es. Esta respuesta es suficiente para recordarme qué etiqueta usar en mi CSS +1.
Nathan Cooper
Este código mencionado anteriormente no funcionó para mí. Cuando profundizo en el problema, me doy cuenta de que no estaba funcionando porque había colocado el estilo después del href. Cuando coloqué el estilo antes del href, estaba funcionando como se esperaba. <a href=" yoursite.com "style="text-decoration:none"> yoursite </a>
Ganesh MS
55

Esto eliminará todos los subrayados de todos los enlaces:

a {text-decoration: none; }

Si tiene enlaces específicos a los que desea aplicar esto, asígneles un nombre de clase, como nounderliney haga esto:

a.nounderline {text-decoration: none; }

Eso se aplicará solo a esos enlaces y no afectará a todos los demás.

Este código pertenece en el <head>de su documento o en una hoja de estilo:

<head>
    <style type="text/css">
        a.nounderline {text-decoration: none; }
    </style>
</head>

Y en el cuerpo:

<a href="#" class="nounderline">Link</a>
John Conde
fuente
15

Sugiero usar: pase el mouse para evitar subrayar si el puntero del mouse está sobre un ancla

a:hover {
   text-decoration:none;
}
romano
fuente
6

  1. Agregue esto a su hoja de estilo externa ( preferido ):

    a {text-decoration:none;}

  2. O agregue esto a <head>su documento HTML:

    <style type="text/css">
 a {text-decoration:none;}
</style>

  3. O agréguelo al aelemento en sí ( no recomendado ):

    <!-- Add [ style="text-decoration:none;"] -->
<a href="http://example.com" style="text-decoration:none;">Text</a>
0b10011
fuente
4

Las otras respuestas mencionan la decoración de texto. A veces usas un tema de Wordpress o el CSS de otra persona donde los enlaces están subrayados por otros métodos, por lo que la decoración de texto: ninguno no desactivará el subrayado.

Border y box-shadow son otros dos métodos que conozco para subrayar enlaces. Para desactivarlos:

border: none;

y

box-shadow: none;
Joe Golton
fuente
2

Lo siguiente no es una mejor práctica, pero a veces puede resultar útil

Es mejor usar la solución provista por John Conde, pero a veces, usar CSS externo es imposible. Para que pueda agregar lo siguiente a su etiqueta HTML:

<a style="text-decoration:none;">My Link</a>
nebulousGirl
fuente
1 
<style="text-decoration: none">

El código anterior será suficiente. Solo pegue esto en el enlace del que desea eliminar el subrayado.

sd1990
fuente
1

Todo el código mencionado anteriormente no funcionó para mí. Cuando profundizo en el problema, me doy cuenta de que no estaba funcionando porque había colocado el estilo después del href. Cuando coloqué el estilo antes del href, estaba funcionando como se esperaba.

<a style="text-decoration:none" href="http://yoursite.com/">yoursite</a>
Ganesh MS
fuente