Remover o sublinhado nos links em HTML / CSS

Setembro 2017

Por padrão, os hyperlinks em HTML são sublinhados com um traço colorido que aparece sob o texto. Você pode remover esse sublinhado utilizando a propriedade CSS text-decoration: none.


Utilizando o 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>

Observação: a pseudoclasse :link permite focar apenas os hiperlinks (a href="") e não os atributos (a name=""). Porém, você pode fazê-lo, se quiser.

Utilizando o CSS através de uma classe

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

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

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

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

Utilizando o CSS online

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

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

Foto: © Pixabay.

Veja também

Artigo original publicado por jak58. Tradução feita por pintuda. Última modificação: 28 de julho de 2017 às 14:06 por Pedro.CCM.
Este documento, intitulado 'Remover o sublinhado 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.