O que saber
- Remova o sublinhado nos links de texto com a propriedade text-decoration CSS digitando a {decoração de texto: nenhum; }.
- Altere o sublinhado para pontos com a propriedade de estilo borda inferior a {decoração de texto: nenhum; border-bottom: 1px pontilhado; }.
- Altere a cor do sublinhado digitando a {decoração de texto: nenhum; borda inferior: 1px vermelho sólido; }. Substitua o vermelho sólido com outra cor.
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 é que qualquer texto vinculado seja 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 {text-decoration: none; }
class = “ql-syntax”> Com aquela 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 do navegador. 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 está. 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 nos 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, portanto, se você sublinhar o conteúdo para dar ênfase (em vez de colocá-lo em negrito ou itálico), enviará a mensagem errada e confundirá os usuários do site.
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 {text-decoration: none; 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 tracejado: a {text-decoration: none; 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 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 1 px 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 pontilhada: a {border-bottom: 1px double; }
Não se esqueça dos estados de link
Você pode adicionar o estilo de borda inferior a 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 pseudo classe “hover”. Para fazer um segundo sublinhado pontilhado aparecer quando você passa o mouse sobre o link: a {text-decoration: none; }
a: hover {border-bottom: 1px pontilhado; }
Formato mla apa chicago Sua Citação
Kyrnin, Jennifer. “Como alterar o sublinhado do link em uma página da web.” ThoughtCo, maio. 14 de 2021, thinkingco.com/change-link-underlines-3466397.
Kyrnin, Jennifer. (2021, 14 de maio). Como alterar o sublinhado do link em uma página da web. Obtido em https://www.thoughtco.com/change-link-underlines-3466397
Kyrnin, Jennifer. “Como alterar o sublinhado do link em uma página da web.” ThoughtCo. https://www.thoughtco.com/change-link-underlines-3466397 (acessado em 28 de maio de 2021).
