Remover sublinhado teimoso do link

542

Estou tentando exibir um link em branco, sem sublinhado. A cor do texto aparece corretamente em branco, mas o sublinhado azul persistentemente persistente. Eu tentei text-decoration: none;e text-decoration: none !important;no CSS para remover o sublinhado do link. Nem funcionou.

.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 snippet

Como posso remover o sublinhado azul do link?

css hyperlink underline

— dmr
fonte

1

Bem, ele deve desaparecer quando você faz uma decoração de texto: nenhuma. Tem certeza de que está aplicando isso ao elemento certo? Você pode fornecer um código de exemplo?

— Davor Lucic

Onde está a decoração de texto: nenhuma está sendo usada?

— shuttle87

772

Como eu esperava, você não está aplicando text-decoration: none;a um anchor ( .boxhead a), mas a um elemento span ( .boxhead).

Tente o seguinte:

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

— Davor Lucic
fonte

12

Mas e se você também tiver um texto ao redor do período e desejar que o texto ao redor tenha o link sublinhado, mas o texto no período não tenha nenhum?

— JMTyler 15/07

4

@rebus, você não pode? Por que não? Cause pelo menos o IE7 + e o FireFox 4+, mas não no Chrome por algum motivo. Aqui está o código que trabalhei nos navegadores que não são do Chrome que testei: .toc-list a > span{text-decoration:none !important;} acho que a pergunta do @ JMTyler é legítima; Estou procurando a mesma solução.

— Tony Topper

7

Parece text-decorationque não suporta a substituição de tags aninhadas, como sugerido acima. Depois de a { text-decoration: underline; }aplicar uma regra, você não pode aplicá-la, por exemplo, com a .wish_this_were_not_underlined { text-decoration: none; }. Não consigo encontrar uma referência para isso, mas essa é a minha experiência (no Chrome).

— Parcialmente nublado

2

Como outros acima, eu não consegui des sublinhar o texto aplicando. Em text-decoration: none;vez disso, optamos por ocultar a linha usando text-decoration: underline; text-decoration-color: white;. / hack

— Ryan Burbidge

1

se você estiver apenas tentando remover o sublinhado de um elemento dentro de uma âncora, e não a âncora inteira. você precisa transformar o elemento interno em um bloco inline da seguinte forma: # .boxhead .otherPage { display: inline-block; color: #FFFFFF; text-decoration: none; }

— Patrick Denny

213

A tag de âncora (link) também possui pseudo-classes como visitada, pairar, link e ativa. Verifique se o seu estilo é aplicado aos estados em questão e se nenhum outro estilo é conflitante.

Por exemplo:

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

Consulte W3.org para obter mais informações sobre pseudo-classes de ação do usuário: hover ,: active e: focus.

— JYelton
fonte

5

Eu acho que você quer dizer a:linkquando diza:click

— artlung

6

Essa deve ser a resposta realmente aceita, pois eu estava tendo o mesmo problema DEPOIS de clicar no link do meu botão. A propriedade visitada ainda estava mudando para roxo quando voltei à página.

— Doresoom

33

text-decoration: none !importantdeve removê-lo .. Você tem certeza de que não há uma border-bottom: 1px solidespreita? (Rastreie o estilo calculado no Firebug / F12 no IE)

— Alex K.
fonte

4

A configuração border-bottom-style: none;corrigiu para mim.

— Helder S Ribeiro

27

Basta adicionar este atributo à sua marca de âncora

style="text-decoration:none;"

Exemplo:

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

Ou use o caminho CSS.

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

— Nagarajan SR
fonte

16

Às vezes, o que você vê é uma sombra de caixa, não um sublinhado de texto.

Tente isso (usando os seletores CSS apropriados para você):

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

    text-decoration: none!important;

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

— jeffmjack
fonte

1

Essa deve ser a resposta. Às vezes, a sombra da caixa dá um efeito sublinhado.

— Bhargav

É uma resposta, mas não é a melhor. O escopo desses é global e não específico. Algo como isso deve fazer o truque: .otherPage a:link {text-decoration:none;}; repita isso para visitado, ativo e passe o mouse, se necessário.

— Ajowi 15/04

14

Você perdeu text-decoration:nonea etiqueta de âncora . Portanto, o código deve estar seguindo.

.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 snippet

Propriedades mais padrão para decoração de texto

— Santosh Khalse
fonte

9

Sem ver a página, é difícil especular.

Mas me parece que você pode estar border-bottom: 1px solid blue;sendo aplicado. Talvez adicione border: none;. text-decoration: none !importantestá certo, é possível que você tenha outro estilo que ainda esteja substituindo esse CSS.

É aqui que a barra de ferramentas do desenvolvedor da Firefox é incrível, você pode editar o CSS ali mesmo e ver se as coisas funcionam, pelo menos para o Firefox. Está abaixo CSS > Edit CSS.

— artlung
fonte

9

Como regra, se o seu "sublinhado" não for da mesma cor que o seu texto [e a 'cor:' não for substituída em linha], não será proveniente de "decoração de texto:" Tem que ser "na parte inferior da borda:"

Não se esqueça de tirar a fronteira de suas pseudo classes também!

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

Este snippet assume que está ancorado, mude para o wrapper de acordo ... e use especificidade em vez de "! Important" depois de rastrear a causa raiz.

— Joel Crawford-Smith
fonte

4

Enquanto as outras respostas estão corretas, existe uma maneira fácil de se livrar do sublinhado em todos esses links traquinas:

a {
   text-decoration:none;
}

Isso removerá o sublinhado de CADA LINK ÚNICO na sua página!

— yarz-tech
fonte

verifique se a tag de âncora e o inline poderiam ser melhores, pois você pode querer sublinhar em outros links.

— Asuquo12

2

Se funcionar text-decoration: noneou border: 0não, tente aplicar o estilo embutido no seu html.

— Deke
fonte

1

Basta usar a propriedade

border:0;

e você está coberto. Funcionou perfeitamente para mim quando as propriedades de decoração de texto funcionam.

— MK Sandhu
fonte

1

Nenhuma das respostas funcionou para mim. No meu caso, havia um padrão

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

no meu código Basicamente, seja qual for o link, a cor do texto fica azul e o link permanece o que é.

Então eu adicionei o código no final do cabeçalho assim:

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

e o problema não existe mais.

— Neo
fonte

1

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

— itzhar
fonte

0

Aqui está um exemplo para o controle LinkButton de formulários da web do asp.net:

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

Código por trás:

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

— JoshYates1980
fonte

0

Você usou nenhuma decoração de texto no seletor errado. Você precisa verificar qual tag você precisa para decoração nenhuma.

Você pode usar este código

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

OU

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

OU

a{text-decoration: none !important;}

— Md Abul Bashar
fonte

0

Coloque o seguinte código HTML antes da <BODY>tag:

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

— qarly_blue
fonte

0

No meu caso, eu tinha formado mal o HTML. O link estava dentro de uma <u>tag e não em uma <ul>tag.

— mwilcox
fonte

0

Como outros apontaram, parece que você não pode substituir estilos de decoração de texto aninhados ... MAS você pode alterar a cor da decoração de texto.

Como um hack, mudei a cor para ficar transparente:

texto-decoração-cor: transparente;

— Ben
fonte