Como alterar os sublinhados do link HTML em uma página da web

Este artigo explica várias maneiras de usar CSS para alterar a aparência padrão dos links de texto em sua página da web, removendo o sublinhado, alterando-o para uma linha pontilhada ou alterando sua cor. Informações adicionais são incluídas para alterar o sublinhado para uma linha tracejada ou sublinhado duplo.

Como remover o sublinhado em links de texto

Por padrão, os navegadores da web têm certos Estilos CSS que se aplicam a elementos HTML específicos. Se você não substituir esses padrões com as folhas de estilo do seu site, os padrões serão aplicados. Para hiperlinks

, o estilo de exibição padrão é qualquer texto vinculado em azul e sublinhado. Se desejar, você pode alterar a aparência desses sublinhados ou removê-los completamente de sua página da web.

Para remover os sublinhados dos links de texto, use a propriedade text-decoration do CSS. Aqui está o CSS que você escreve para fazer isso:

a {decoração de texto: nenhum; }

Com essa única linha de CSS, você remove o sublinhado de todos os links de texto em sua página da web. Embora este seja um estilo muito geral (ele usa um seletor de elemento), ele ainda tem mais especificidade do que os estilos padrão dos navegadores. Como são esses estilos padrão que criam os sublinhados para começar, é isso que você precisa sobrescrever.

Um cuidado ao remover sublinhados

Visualmente, a remoção de sublinhados pode ser exatamente o que você deseja realizar, mas você também deve ter cuidado ao fazer isso. Quer você goste da aparência dos links sublinhados ou não, você não pode argumentar que eles tornam óbvio qual texto está vinculado e qual não. Se você remover os sublinhados ou alterar a cor do link azul padrão, certifique-se de substituí-los por estilos que ainda permitem que o texto vinculado se destaque. Isso tornará a experiência mais intuitiva para os visitantes do seu site.

Não sublinhe não-links

Outro cuidado com links e sublinhados, não sublinhe texto que não seja um link como forma de enfatizá-lo. As pessoas esperam que o texto sublinhado seja um link, então, se você sublinhar o conteúdo para adicionar ênfase (em vez de colocá-lo em negrito ou itálico), você envia a mensagem errada e confunde o site Comercial.

Como alterar o sublinhado para pontos ou travessões

Se quiser manter os sublinhados do link de texto, mas alterar o estilo desse sublinhado da aparência padrão, que é uma linha "sólida", você também pode fazer isso. Em vez dessa linha sólida, você pode usar pontos para sublinhar seus links. Para fazer isso, você ainda removerá o sublinhado, mas irá substituí-lo pela propriedade de estilo border-bottom:

a {decoração de texto: nenhum; border-bottom: 1px pontilhado; }

Como você removeu o sublinhado padrão, o pontilhado é o único que aparece.

Você pode fazer a mesma coisa para obter travessões. Basta alterar o estilo da borda inferior para tracejada:

a {decoração de texto: nenhum; border-bottom: 1px tracejado; }

Como alterar a cor do sublinhado

Outra forma de chamar a atenção para seus links é alterar a cor do sublinhado. Apenas certifique-se de que a cor combina com o seu esquema de cores.

a {decoração de texto: nenhum; borda inferior: 1px vermelho sólido; }

Sublinhado duplo

O truque para usar sublinhados duplos é que você precisa alterar a largura da borda. Se você criar uma borda de 1px de largura, acabará com um sublinhado duplo que se parece com um sublinhado único.

a {decoração de texto: nenhum; borda inferior: 3px duplo; }

Você também pode usar o sublinhado existente para fazer um sublinhado duplo com outros recursos, como uma das linhas pontilhadas:

a {border-bottom: 1px double; }

Não se esqueça dos estados de link

Você pode adicionar o estilo de borda inferior aos seus links em diferentes estados, como: hover,: active ou: visitado. Isso pode criar uma experiência de estilo "rollover" agradável para os visitantes quando você usa essa pseudoclasse "hover". Para fazer um segundo sublinhado pontilhado aparecer quando você passa o mouse sobre o link:

a {decoração de texto: nenhum; }
a: hover {border-bottom: 1px pontilhado; }