Como remover o sublinhado de âncoras (links)?

313

Existe alguma maneira (em CSS) para evitar o sublinhado do texto e links introduzidos na página ..?

Steven
fonte
8
<penantic> Você nunca pode assumir como um navegador renderizará seu HTML. uma tag renderiza uma âncora que o navegador escolhe exibir como sublinhado por padrão. u é a única marca de sublinhado. as respostas abaixo são respostas CSS </pendantic>
Dead account
44
A ironia de que alguém é pedante o suficiente para fazer esse comentário, mas não o suficiente para soletrar a palavra corretamente (ou mesmo consistentemente!) Me surpreende.
Technetium
Além das respostas abaixo, o manuseio a:hovertambém deve ser considerado, os navegadores mais populares tendem a mostrar um sublinhado nas âncoras ao passar o mouse.
Fr0zenFyr

Respostas:

517

Use CSS. isso remove sublinhados de ae uelementos:

a, u {
    text-decoration: none;
}

Às vezes, você precisa substituir outros estilos por elementos; nesse caso, você pode usar o !important modificador em sua regra:

a {
    text-decoration: none !important;
}
Emil Vikström
fonte
1
Se color: black !important;fosse adicionado body, isso também definirá todos os elementos, incluindo âncoras, âncoras visitadas e âncoras pairadas, sempre pretas?
Ωmega
Egamega Δ, aparentemente não, e graças a você apontar, encontrei um erro na regra geral do corpo. Eu atualizei minha resposta.
Emil Vikström
O que descobri é que, se você definir estilo text-decoration: none !important;para bodyelemento, ele funcionará para âncoras apenas quando você definir explicitamente estilo text-decoration: inherit;para aelementos.
Egamega
7
Geralmente, é melhor evitar !importante usar especificidade e cardinalidade para substituir estilos, caso contrário, você pode acabar com uma folha de estilo cheia !importantsem entender a estrutura que a torna necessária. É um código de cheiro IMO.
Mike Lyons
!importanté como ter uma bomba nuclear. Mas quando você começa a se seduzir e usa !importantoutros elementos, pode obtê-lo (nuke) e a vantagem é a favor de um impasse, o que é ótimo para o mundo, pois o MUD garante a paz, mas no mundo do css, essa paz significa que você não pode dar algo a vantagem.
JasonGenX
27

O css é

text-decoration: none;

e

text-decoration: underline;
DanDan
fonte
16

Isso removerá sua cor e o sublinhado de que a marca de âncora existe com

 a {
     text-decoration: none ;
  }
a:hover
  {
    color:white;
    text-decoration:none;
    cursor:pointer;
   }
Ashwin Shahi
fonte
11

A opção mais simples é esta:

<a style="text-decoration: none">No underline</a>

Obviamente, misturar CSS com HTML (ou seja, CSS embutido) não é uma boa ideia, especialmente quando você usa atags em todo o lugar.
É por isso que é uma boa ideia adicionar isso a uma folha de estilo:

a {
    text-decoration: none;
}

Ou mesmo esse código em um arquivo JS:

var els = document.getElementsByTagName('a');

for (var el = 0; el < els.length; el++) {
    els[el].style["text-decoration"] = "none";
}
XLogic
fonte
Iphone / Android não são bons valores de referência, pois não representam a renderização HTML reversa do Gmail ou do Outlook.
Stuart
@XLogic: Muito obrigado
Monika Patel
6

Use CSS para remover text-decorations.

a {
    text-decoration: none;
}
Alan Haggai Alavi
fonte
6

Melhor opção para você, se você deseja remover apenas o sublinhado do link âncora -

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

Isso removerá o sublinhado.

Além disso, você pode usar sintaxe semelhante para manipular outros estilos também usando:

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

Espero que isto ajude!

PS- Esta é a minha primeira resposta de sempre!

praveen kaushik
fonte
4

no meu caso, havia uma regra sobre efeito de foco da âncora, assim:

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

Claro, text-decoration:none;não poderia ajudar nesta situação. E passo muito tempo até descobrir.

Portanto: um sublinhado não deve ser confundido com uma borda inferior.

Aleksandr Khomenko
fonte
4

Em algum momento, ele será substituído por alguma renderização de CSS da interface do usuário. Melhor usar:

a.className {
    text-decoration: none !important;
}
Sanjib Karmakar
fonte
1
Esta é uma péssima ideia. stackoverflow.com/questions/8360190/…
Benjamin Gruenbaum
2

Para fornecer outra perspectiva para o problema (conforme inferido no título / conteúdo da postagem original):

Se você deseja rastrear o que está criando sublinhados não autorizados no seu HTML, use uma ferramenta de depuração. Há muito por onde escolher:

Para o Firefox existe o FireBug;

Para o Opera, há o Dragonfly (chamado "Developer tools" no menu Ferramentas-> Avançado; vem com o Opera por padrão);

Para o IE, existe a "Barra de Ferramentas do Desenvolvedor do Internet Explorer", que é um download separado para o IE7 e versões inferiores, e é integrada ao IE8 (pressione F12).

Não tenho idéia do Safari, Chrome e outros navegadores minoritários, mas você provavelmente deve ter pelo menos um dos três acima em sua máquina.

Vilx-
fonte
1

Quando você deseja usar uma marca de âncora simplesmente como um link sem o estilo adicionado (como o sublinhado ao passar o mouse ou a cor azul), adicione- class="no-style"a à marca de âncora. Em sua folha de estilo global, crie a classe "sem estilo".

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

Isso tem duas vantagens.

  1. Isso não afetará todas as tags âncora, apenas aquelas com a classe "sem estilo" adicionada a elas.
  2. Ele substituirá qualquer outro estilo que possa impedir a configuração de decoração de texto como nenhuma.
Frederick John
fonte
0

Não se esqueça de incluir folhas de estilo usando a tag link

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

Ou coloque CSS em uma tag de estilo em sua página da web.

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

Eu não recomendaria usar o sublinhado em nada além de links, sublinhado geralmente é aceito como algo clicável. Se não for clicável, não o sublinhe.

O básico sobre CSS pode ser adquirido em w3schools

JasonS
fonte
0
<u>

é uma tag obsoleta.

Usar...

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

com um arquivo CSS contendo ...

span.underline
{
    text-decoration: underline;
}  

ou apenas...

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

Use a propriedade css,

text-decoration:none;

Para remover o sublinhado do link.

Smita Kagwade
fonte
0

O sublinhado pode ser removido por uma propriedade CSS chamada decoração de texto.

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

Se você deseja remover o sublinhado do texto presente nos elementos que não sejam a , a seguinte sintaxe deve ser usada.

<style>
element-name{
text-decoration:none;
}
</style>

Existem muitos outros valores de decoração de texto que podem ajudá-lo a criar links.

Sheraz
fonte
-1

Fui incomodado com esse problema na impressão na web e resolvi. Resultado verificado.

a {
    text-decoration: none !important;
}

Funciona!.

Incheol
fonte