Remover o sublinhamento nos links em HTML / CSS

Fevereiro 2017


Por padrão, os hyperlinks em HTML são sublinhados, um traço da cor do link aparece abaixo do texto. Você pode remover esse sublinhado utilizando a propriedade "CSS text-decoration: none":


Graças ao CSS


Para fazê-lo, basta definir o seguinte código CSS em seu código HTML :
<style type="text/css"> 
a:link 
{ 
 text-decoration:none; 
} 
</style>


Saiba que a pseudo-classe :link permite ter como alvo apenas os hiperlinks (<a href="">) e não as âncoras (<a name="">). Porém, você não precisa utilizá-la, se não quiser.

Graças ao CSS através de uma classe


Se você quiser esse estilo se aplique somente a certos links, basta, por exemplo, definir uma classe específica para os links não sublinhados (por exemplo, classe nounderline):

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


Depois, ao escrever o link, referir-se a esta classe:

<a href="/" class="nounderline">Texto do link</a>

Graças ao CSS on-line


Enfim, se você não quiser definir a folha de estilo, você pode simplesmente definir o estilo on-line usando o atributo de estilo, da seguinte maneira:

<a href="/" style="text-decoration:none">Texto do link</a>



Tradução feita por Lucia Maurity y Nouira

Veja também

Artigo original publicado por . Tradução feita por pintuda. Última modificação: 3 de junho de 2011 às 17:16 por pintuda.
Este documento, intitulado 'Remover o sublinhamento nos links em HTML / CSS', está disponível sob a licença Creative Commons. Você pode copiar e/ou modificar o conteúdo desta página com base nas condições estipuladas pela licença. Não se esqueça de creditar o CCM (br.ccm.net) ao utilizar este artigo.