Eliminar el subrayado obstinado del enlace


542

Estoy intentando que aparezca un enlace en blanco, sin subrayado. El color del texto se muestra correctamente como blanco, pero el subrayado azul persiste obstinadamente. Intenté text-decoration: none;y text-decoration: none !important;en el CSS para eliminar el enlace subrayado. Ninguno funcionó.

.boxhead .otherPage {
  color: #FFFFFF;
  text-decoration: none;
}
<div class="boxhead">
  <h2>
    <span class="thisPage">Current Page</span>
    <a href="myLink"><span class="otherPage">Different Page</span></a>
  </h2>
</div>

¿Cómo puedo eliminar el subrayado azul del enlace?


1
Bueno, debería desaparecer cuando haces decoración de texto: ninguno. ¿Estás seguro de que estás aplicando esto al elemento correcto? ¿Puedes proporcionar un código de ejemplo?
Davor Lucic

¿Dónde está la decoración de texto: no se usa ninguno?
shuttle87

Respuestas:


772

Como esperaba, no está aplicando text-decoration: none;a un ancla ( .boxhead a) sino a un elemento span ( .boxhead).

Prueba esto:

.boxhead a {
    color: #FFFFFF;
    text-decoration: none;
}

12
Pero, ¿qué sucede si también tiene texto que rodea el lapso y desea que el texto circundante tenga el enlace subrayado, pero el texto dentro del lapso no tenga ninguno?
JMTyler

44
@rebus, ¿no puedes? Por qué no? Porque al menos en IE7 + y FireFox 4+ puedes, pero no en Chrome por alguna razón. Aquí está el código que pude trabajar en los navegadores que no son de Chrome que probé: .toc-list a > span{text-decoration:none !important;} creo que la pregunta de @ JMTyler es legítima; Estoy buscando la misma solución.
Tony Topper

77
Parece text-decorationque no admite la anulación de etiquetas anidadas, como se indicó anteriormente. Una vez que tiene una a { text-decoration: underline; }regla aplicada, no puede eliminarla, por ejemplo, con a .wish_this_were_not_underlined { text-decoration: none; }. No puedo encontrar una referencia para esto, pero esa es mi experiencia (en Chrome).
Parcialmente nublado

2
Al igual que otros anteriores, no pude quitar el subrayado del texto al aplicarlo, por text-decoration: none;lo que elegimos ocultar la línea usando text-decoration: underline; text-decoration-color: white;. / hack
Ryan Burbidge

1
si solo está tratando de eliminar el subrayado de un elemento dentro de un ancla, y no todo el ancla. debe hacer que el elemento interno sea un bloque en línea de la siguiente manera: .boxhead .otherPage { display: inline-block; color: #FFFFFF; text-decoration: none; }
Patrick Denny el

213

La etiqueta de anclaje (enlace) también tiene pseudoclases como visita, desplazamiento, enlace y activo. Asegúrese de que su estilo se aplique a los estados en cuestión y que ningún otro estilo sea conflictivo.

Por ejemplo:

a:hover, a:visited, a:link, a:active
{
    text-decoration: none;
}

Consulte W3.org para obtener más información sobre las pseudoclases de acción del usuario: hover,: active y: focus.


55
Creo que quieres decir a:linkcuando dicesa:click
artlung

66
Esta debería ser la respuesta aceptada real, ya que estaba teniendo el mismo problema DESPUÉS de hacer clic en el enlace de mi botón. La propiedad visitada todavía estaba cambiando a púrpura cuando volví a la página.
Doresoom

33

text-decoration: none !importantdebería eliminarlo ... ¿Estás seguro de que no hay un border-bottom: 1px solidacecho? (Rastree el estilo calculado en Firebug / F12 en IE)


44
La configuración border-bottom-style: none;me lo arregló.
Helder S Ribeiro

27

Simplemente agregue este atributo a su etiqueta de anclaje

style="text-decoration:none;"

Ejemplo:

<a href="page.html"  style="text-decoration:none;"></a>

O use la forma CSS.

.classname a {
    color: #FFFFFF;
    text-decoration: none;
}

16

A veces, lo que está viendo es una sombra de cuadro, no un subrayado de texto.

Pruebe esto (usando los selectores CSS que sean apropiados para usted):

a:hover, a:visited, a:link, a:active {

    text-decoration: none!important;

    -webkit-box-shadow: none!important;
    box-shadow: none!important;
}

1
Esta debería ser la respuesta. A veces, la sombra del cuadro da un efecto de subrayado.
Bhargav

Es una respuesta, pero no la mejor. El alcance de estos es global y no específico. Algo como esto debería hacer el truco .otherPage a:link {text-decoration:none;}:; repita eso para visitado, activo y pase el mouse si es necesario.
Ajowi

14

Te perdiste text-decoration:nonela etiqueta de anclaje . Entonces el código debería estar siguiendo.

.boxhead a {
    text-decoration: none;
}
<div class="boxhead">
    <h2>
        <span class="thisPage">Current Page</span>
        <a href="myLink"><span class="otherPage">Different Page</span></a>
    </h2>
</div>

Más propiedades estándar para la decoración de texto.

ingrese la descripción de la imagen aquí


9

Sin ver la página, difícil de especular.

Pero me parece que es posible que te border-bottom: 1px solid blue;apliquen. Quizás agregar border: none;. text-decoration: none !importantes correcto, es posible que tengas otro estilo que aún anula ese CSS.

Aquí es donde usar la barra de herramientas para desarrolladores web de Firefox es increíble, puedes editar el CSS allí mismo y ver si las cosas funcionan, al menos para Firefox. Está debajo CSS > Edit CSS.


9

Como regla general, si su "subrayado" no es del mismo color que su texto [y el 'color:' no está anulado en línea] no proviene de "text-decoration:" Tiene que ser "border-bottom:"

¡No olvides quitar el límite de tus pseudo clases también!

a, a:link, a:visited, a:active, a:hover {border:0!important;}

Este fragmento asume que está en un ancla, cambia a su envoltorio en consecuencia ... y usa la especificidad en lugar de "! Important" después de rastrear la causa raíz.


4

Si bien las otras respuestas son correctas, hay una manera fácil de deshacerse del subrayado en todos esos enlaces molestos:

a {
   text-decoration:none;
}

¡Esto eliminará el subrayado de CADA UNO ENLACE en su página!


asegúrese de que esté en la etiqueta de anclaje y en línea podría ser mejor ya que es posible que desee el subrayado en otros enlaces.
Asuquo12

2

Si funciona text-decoration: noneo border: 0no, intente aplicar el estilo en línea en su html.


1

Solo usa la propiedad

border:0;

y estás cubierto Funcionó perfectamente para mí cuando la propiedad de decoración de texto no funciona.


1

Ninguna de las respuestas funcionó para mí. En mi caso hubo un estándar

a:-webkit-any-link {
text-decoration: underline;

en mi código Básicamente, sea cual sea el enlace, el color del texto se vuelve azul y el enlace permanece como sea.

Así que agregué el código al final del encabezado de esta manera:

<head>
  </style>
    a:-webkit-any-link {
      text-decoration: none;
    }
  </style>
</head>

y el problema ya no existe.



0

Aquí hay un ejemplo para el control LinkButton de formularios web asp.net:

 <asp:LinkButton ID="lbmmr1" runat="server" ForeColor="Blue" />

Código detrás:

 lbmmr1.Attributes.Add("style", "text-decoration: none;")

0

Ha utilizado decoración de texto ninguno en el selector incorrecto. Debe verificar qué etiqueta necesita para la decoración, ninguna.

Puedes usar este código

.boxhead h2 a{text-decoration: none;}

O

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

O

a{text-decoration: none !important;}

0

Ponga el siguiente código HTML antes de la <BODY>etiqueta:

<STYLE>A {text-decoration: none;} </STYLE>


0

En mi caso, tenía HTML mal formado. El enlace estaba dentro de una <u>etiqueta, y no en una <ul>etiqueta.


0

Como otros señalaron, parece que no puedes anular los estilos de decoración de texto anidados ... PERO puedes cambiar el color de la decoración de texto.

Como truco, cambié el color para que sea transparente:

texto-decoración-color: transparente;
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.