How to remove the html / css underscore

To remove an underscore, you can change the value of text-decoration (Code below).

To add a color, simply change the value of text-decoration-color . Ex:

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

Code:

.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>

I'll take the question to clarify some things.

The link has a few different states depending on the user's interaction.

a {}

a:link {}

a:visited {}

a:focus {}

a:hover {}

a:active {}

Source : link

w3.org recommends the following:

: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; }

Source : link

Inshort,itrecommendsthecolorsasaboveandtheuseofUnderlineandCursor:Pointer

Butbydefaultthebrowseritselfcreatessomestylesthatmayvaryfromonetotheother.ThisimageisonlytoillustratewhatmighthappenwithsomeHTMLelementsindifferentbrowsers.

Inthisexample,youseehowthedifferentbrowserversionsare.

  

HereisacompletelistofDefaultValuesforallHTMLElements

link

About this underline you see below Link you can treat it with 3 classes:

text-decoration-color: ; 
text-decoration-line: ;
text-decoration-style: ;

• Color is the line color (hexadecimal, rgb, etc)
• Line is if it has the line and the position (undeline, overline, etc)
• Style is the style of the line (wavy, dottet, etc.)

Here are some simple examples of how to use 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>

Source: link

  

Would not use text-decoration-color or text-decoration-style because it is incompatible with   Internet Explorer:

  

Idonotthinkit'sagoodideatousestylesnotsupportedbyall  modernbrowsers.Afterall,youwantyoursitetolookthesametoallaudiences.

Thereisasimplewaytogetaroundthis,usingborder-bottominthetext,withoutprejudicetothevisualofthesiteandcompatiblewithallbrowsers:

Removetheunderlinefromthelinknormally,usingtext-decoration:none;

.esp.facebooka{text-decoration:none;}

Addaborder-bottomanddisplay:inlinetothetext:

.esp.facebookap{border-bottom:1pxsolidred;display:inline;}

Seetheresult(byaddingaredunderline):

.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>