Por padrão, os navegadores da Web possuem determinados estilos CSS que se aplicam a elementos HTML específicos. Se você não sobrescrever esses padrões com as folhas de estilo do seu próprio site, os padrões serão aplicados. Para hiperlinks, o estilo de exibição padrão é que qualquer texto vinculado será azul e sublinhado. O navegador faz isso para que os visitantes de um site possam ver facilmente qual texto está vinculado. Muitos web designers não se importam com esses estilos padrão, especialmente aqueles sublinhados. Felizmente, o CSS torna fácil alterar a aparência desses sublinhados ou removê-los completamente.
Removendo o sublinhado em links de texto
O texto sublinhado pode ser mais desafiador para ler esse texto não sublinhado. Além disso, muitos designers simplesmente não se importam com a aparência de links de texto sublinhados. Nesses casos, você provavelmente desejará remover completamente esses sublinhados.
Para remover os sublinhados dos links de texto, você usará a propriedade text-decoration da propriedade CSS. Aqui está o CSS que você escreveria para fazer isso:
um {texto-decoração: nenhum; }
Com essa linha de CSS, você removeria o sublinhado de todos os links de texto. Embora esse seja um estilo muito geral (ele usa um seletor de elemento), ele ainda tem mais especificidade do que os estilos de navegadores padrão. Como esses estilos padrão são o que cria 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ê deve ser cauteloso ao fazer isso também. Quer você goste da aparência de links sublinhados ou não, não pode argumentar que eles tornam óbvio o texto que está vinculado e o que não está. Se você tirar sublinhados ou alterar a cor do link azul padrão, certifique-se de substituí-los por estilos que ainda permitam que o texto vinculado se destaque. Isso proporcionará uma experiência mais intuitiva para os visitantes do seu site.
Não sublinhar links não
Outro cuidado em links e sublinhados, não sublinham o texto que não é um link como forma de enfatizá-lo. As pessoas esperam que o texto sublinhado seja um link, portanto, se você sublinhar o conteúdo para adicionar ênfase (em vez de torná-lo em negrito ou em itálico), você envia a mensagem errada e confunde os usuários do site.
Alterar o sublinhado para pontos ou traços
Se você quiser manter o texto sublinhado, mas mudar o estilo desse sublinhado a partir da aparência padrão, que é uma linha "soldi", 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:
um {texto-decoração: nenhum; borda inferior: 1px pontilhada; }
Desde que você removeu o sublinhado padrão, o pontilhado é o único que aparece.
Você pode fazer o mesmo para obter traços. Apenas mude o estilo border-bottom para tracejado:
um {texto-decoração: nenhum; border-bottom: 1px tracejado; }
Alterar a cor do sublinhado
Outra maneira de chamar a atenção para seus links é alterar a cor do sublinhado. Apenas certifique-se de que a cor se encaixa no seu esquema de cores.
um {texto-decoração: nenhum; borda inferior: 1px vermelho sólido; }
Duplo Sublinhado
O truque para usar sublinhados duplos é que você precisa alterar a largura da borda. Se você criar uma borda com largura de 1 px, terminará com um sublinhado duplo que se parece com um sublinhado único.
um {texto-decoração: nenhum; borda inferior: 3px duplo; }
Você também pode usar o sublinhado existente para criar um sublinhado duplo com outros recursos, como uma das linhas sendo pontilhadas:
um {border-bottom: 1px double; }
Não esqueça os estados do link
Você pode adicionar o estilo border-bottom aos seus links em estados diferentes, como: hover,: active ou: visited. Isso pode criar uma boa experiência de estilo "rollover" para os visitantes quando você usa essa classe de pseudo "pairar". Para fazer um segundo sublinhado pontilhado aparecer quando você passa o mouse sobre o link:
um {texto-decoração: nenhum; } a: hover {border-bottom: 1px pontilhado; }
Artigo original de Jennifer Krynin. Editado por Jeremy Girard
