2

inserir a descrição da imagem aqui

Como eu tiro esse sublinado de azul bem escuro ou como mudar a cor?

o codigo em html:

  <section class="esp">
                <div class="facebook">
                <img src="images/facebook.png" alt="facebook">
                <a href="facebook.com" target="_blank" ><p>facebook.com/securejob1</p></a>
                </div>
            </section>

o coddigo em css:

.esp .facebook p{
    text-decoration:none; 
    display: block;
    position: center top;
    font-family: arial;
    font-style: normal;
    color: #20b3ff;
    font-weight: 500;
    font-size: 12px;
    margin-left:285px
}
.esp .facebook img{
    display: block;
    position: absolute;
    position: center top;
    margin-left:260px;
}

4 Respostas 4

2

Para remover um sublinhado, você pode alterar o valor de text-decoration (Código abaixo).

Para adicionar uma cor, basta alterar o valor de text-decoration-color. Ex:

.esp .facebook a {
   text-decoration-color: red;
}

Código:

.esp .facebook p {
  text-decoration: none;
  display: block;
  position: center top;
  font-family: arial;
  font-style: normal;
  color: #20b3ff;
  font-weight: 500;
  font-size: 12px;
  margin-left: 285px;
}

.esp .facebook img {
  display: block;
  position: absolute;
  position: center top;
  margin-left: 260px;
}

/* Código adicionado */
.esp .facebook a {
  text-decoration: none
}
<section class="esp">
  <div class="facebook">
    <img src="images/facebook.png" alt="facebook">
    <a href="facebook.com" target="_blank">
      <p>facebook.com/securejob1</p>
    </a>
  </div>
</section>

2

Vou aproveitar a pergunta para esclarecer algumas coisas.

O link tem alguns estados diferentes dependendo da interação do úsuário.

a {}

a:link {}

a:visited {}

a:focus {}

a:hover {}

a:active {}

Fonte: https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Styling_links

A w3.org recomenda o seguinte:

:link { color: #0000EE; }                          /* cor azul */
:visited { color: #551A8B; }                       /* cor roxa */
:link:active, :visited:active { color: #FF0000; }  /* cor vermelha */
:link, :visited { text-decoration: underline; cursor: pointer; }
a:link[rel~=help], a:visited[rel~=help],
area:link[rel~=help], area:visited[rel~=help] { cursor: help; }

Fonte: https://www.w3.org/TR/html5/rendering.html#phrasing-content-0

inserir a descrição da imagem aqui

Resumindo, recomenda as cores conforme acima e o uso de Underline e Cursor:Pointer

Porém por default o próprio browser criar alguns estilos que podem variar de um para o outro. Essa imagem é apenas para ilustrar o que pode ocorrer com alguns elementos HTML em browser diferentes.

Nesse exemplo se ve como fica o em versões diferentes de browser.

inserir a descrição da imagem aqui

Aqui tem uma linsta completa dos Valores Default para todos os Elementos HTML

https://www.w3schools.com/cssref/css_default_values.asp

Sobre esse sublinhado que vc vê abaixo do Link vc pode trata-lo com 3 classes:

text-decoration-color: ; 
text-decoration-line: ;
text-decoration-style: ;
  • Color é a cor da linha (hexadecimal, rgb, etc)
  • Line é se tem a linha e a posição (undeline, overline, etc)
  • Style é o estilo da linha (wavy, dottet, etc)

Veja o exemplo alguns exemplos simples de como usar as classes:

a {
    text-decoration: underline; 
    text-decoration-style: wavy; 
    text-decoration-color: orange;
    display: block;
    margin: 16px;
}
a.under {
    color: #333;
    text-decoration: underline;
    text-decoration-style: double;
    text-decoration-color: currentcolor;
}
a.over {
    text-decoration: overline;
    text-decoration-style: dotted;
    text-decoration-color: green;

}
a.line {
    color: rgb(15, 139, 36);
    text-decoration: line-through;
    text-decoration-style: dashed;
    text-decoration-color: red;
}

a:active {
    color: cyan;
    font-size: 110%;
}
<a href="#">underline wavy</a>
<a href="#" class="under">underline</a>
<a href="#" class="over">overline</a>
<a href="#" class="line">line-through</a>
<a href="#">active none</a>

inserir a descrição da imagem aqui

Fonte: https://www.w3schools.com/cssref/pr_text_text-decoration.asp

0

Não usaria text-decoration-color ou text-decoration-style porque é incompatível com o Internet Explorer:

inserir a descrição da imagem aqui

Não acho boa ideia usar estilos não-suportados por todos os navegadores modernos. Afinal de contas, você deseja que seu site tenha o mesmo visual para todos os públicos.

Existe uma forma simples de contornar isso, usando border-bottom no texto, sem prejuízo no visual do site e compatível com todos os navegadores:

Retire o sublinhado do link normalmente, usando text-decoration: none;

.esp .facebook a{
   text-decoration: none;
}

Adicione um border-bottom e display: inline ao texto:

.esp .facebook a p{
   border-bottom: 1px solid red;
   display: inline;
}

Veja o resultado (adicionando um sublinhado vermelho):

.esp .facebook p{
    text-decoration:none; 
    display: block;
    position: center top;
    font-family: arial;
    font-style: normal;
    color: #20b3ff;
    font-weight: 500;
    font-size: 12px;
    margin-left:285px
}
.esp .facebook img{
    display: block;
    position: absolute;
    position: center top;
    margin-left:260px;
}

.esp .facebook a{
   text-decoration: none;
}

.esp .facebook a p{
   border-bottom: 1px solid red;
   display: inline;
}
<section class="esp">
    <div class="facebook">
    <img src="https://www.sawater.com.au/__data/assets/image/0005/21956/facebook.png" alt="facebook">
    <a href="facebook.com" target="_blank" ><p>facebook.com/securejob1</p></a>
    </div>
</section>

0

Para retirar o sublinhado de um link, utilize a seguinte propriedade; a{ text-decoration: none; }

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .