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>

Expandir fragmento

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

css hyperlink underline

— dmr
fuente

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

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;
}

— Davor Lucic
fuente

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.

— JYelton
fuente

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)

— Alex K.
fuente

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;
}

— Nagarajan SR
fuente

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;
}

— jeffmjack
fuente

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>

Expandir fragmento

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

— Santosh Khalse
fuente

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.

— artlung
fuente

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.

— Joel Crawford-Smith
fuente

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!

— yarz-tech
fuente

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.

— Deke
fuente

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.

— MK Sandhu
fuente

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.

— Neo
fuente

1

  a {
    color: unset;
    text-decoration: unset;
  }

— itzhar
fuente

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;")

— JoshYates1980
fuente

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;}

— Md Abul Bashar
fuente

0

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

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

— qarly_blue
fuente

0

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

— mwilcox
fuente

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;

— Ben
fuente