Remover sublinhado azul do link no CSS

1. Defina a propriedade text-decoration como none para remover o sublinhado azul de um link em CSS
2. Use Pseudo-Classes para Seleção para Remover Sublinhado Azul de um Link em CSS
3. Remova a propriedade box-shadow para remover o sublinhado e a cor de um link em CSS

Este tutorial apresentará métodos para remover o sublinhado azul formado no hiperlink em HTML. Usaremos CSS para remover tal sublinhado.

Defina a propriedade text-decoration como none para remover o sublinhado azul de um link em CSS

Podemos usar a propriedade text-decoration em CSS para especificar a decoração do texto. A propriedade é uma propriedade abreviada de três outras propriedades. Essas propriedades são text-decoration-line, text-decoration-color e text-decoration-style. A propriedade text-decoration-line aplica as decorações de texto como overline, underline e line-through. A propriedade text-decoration-color é responsável por definir a cor da decoração do texto, e o text-decoration-style aplica diferentes estilos como sólido, ondulado, pontilhado, tracejado à decoração do texto. Quando usamos a propriedade abreviada text-decoration, podemos especificar o valor como none. Como resultado, podemos definir todas as três propriedades como none. Conseqüentemente, ele removerá o sublinhado no hiperlink e também removerá a cor azul.

Por exemplo, crie um div com a classe container. Então, dentro da div, crie um span com a classe thisPage. A seguir, entre a tag span, escreva o texto Página Atual. Escreva uma tag anchor na linha a seguir. Defina o atributo href da tag como #. Dentro da tag anchor, escreva outro span com a classe otherPage. Escreva o texto Next Page entre a span. Em seguida, no arquivo CSS correspondente, selecione a âncora, tag que está dentro da classe container como .container a. Defina a cor vermelha para o texto usando o código hexadecimal #FF0000. Em seguida, defina a propriedade text-decoration como none.

O CSS abaixo definirá o texto Next Page a vermelho, que é um hiperlink. A propriedade text-decoration, que é definida como none, removerá o sublinhado e a cor azul do elemento da tag anchor.

Código de exemplo:

<div class="container">
    <span class="thisPage">Current Page</span>
    <a href="#"><span class="otherPage">Next Page</span></a>
</div>

.container a {
  color: #FF0000;
  text-decoration: none;
}

Use Pseudo-Classes para Seleção para Remover Sublinhado Azul de um Link em CSS

Selecionaremos as pseudo-classes e aplicaremos as mesmas propriedades CSS do primeiro método para remover o sublinhado azul de um link. Anteriormente, selecionávamos apenas a tag anchor. Neste método, usaremos pseudo classes para selecionar as tags âncora. Usaremos pseudo classes como :hover, :visit, :link e :active. A classe :hover se aplica quando o usuário aponta o elemento com um dispositivo apontador, como um mouse, mas não necessariamente clica no elemento. A classe :visit se aplica quando o link já foi clicado. Da mesma forma, a classe :link seleciona todos os links não visitados. E, a classe :active seleciona o link ativo. Usaremos o mesmo documento HTML para demonstração neste método.

Por exemplo. use as pseudo-classes :link, :visit, :hover e :active selecionando a tag anchor. Separe cada pseudo-classes com uma vírgula. Defina a propriedade text-decoration como none e defina a propriedade color como #000000.

As propriedades CSS aplicadas entrarão em vigor para todas as pseudo classes no exemplo abaixo. O seletor a:link mudará a cor do hiperlink para preto e removerá o sublinhado quando o link não for visitado. Ele substitui a propriedade color entre todos os outros seletores. O seletor a: visitado removerá o sublinhado do link após o link ter sido visitado. Os efeitos CSS também ocorrerão quando passarmos o mouse sobre o link e no momento em que clicarmos nele. Desta forma, podemos remover o sublinhado e a cor azul do link usando as pseudo-classes CSS.

Código de exemplo:

<span class="thisPage">Current Page</span>
<a href="#"><span class="otherPage">Next Page</span></a>

a:link, a:visited,  a:hover, a:active
{
    color: #000000;
    text-decoration: none;
}

Remova a propriedade box-shadow para remover o sublinhado e a cor de um link em CSS

Às vezes, o sublinhado pode ser estilizado usando a propriedade box-shadow. Podemos fornecer o efeito de sublinhado a qualquer texto usando a propriedade. O seguinte trecho de código CSS cria um sublinhado.

box-shadow: inset 0 -3px 0 0 #bdb;

Nesse caso, se quisermos remover o sublinhado, podemos remover a propriedade box-shadow ou podemos definir o valor da propriedade como none.

No exemplo abaixo, uma classe span é estilizada na cor verde, e a propriedade box-shadow é usada para criar um sublinhado na cor vermelha. Em seguida, o valor da propriedade é definido como none, o que remove o efeito de sublinhado do texto.

Código de exemplo:

<span class="thisPage">Current Page</span>

.thisPage {
  color: green;
  box-shadow: inset 0 -3px 0 0 red;
  box-shadow: none;
}