How to underline html / css

Question

How I take this subline of dark blue or how to change the color?

the code in 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;
}

Answer 1

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>

Answer 2

I’ll take the question to clarify a few things.

The link has some different states depending on the interaction of the úsuário.

a {}

a:link {}

a:visited {}

a:focus {}

a:hover {}

a:active {}

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

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: https://www.w3.org/TR/html5/rendering.html#phrasing-content-0

In short, it recommends the colors as above and the use of Underline and Cursor:Pointer

But by default the browser itself create some styles that may vary from one to the other. This image is just to illustrate what might happen with some different browser HTML elements.

In this example you see how it looks in different versions of browser.

Here is a complete list of Default Values for all HTML Elements

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

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

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

• Color is the color of the line (hexadecimal, rgb, etc)
• Line is if you have line and position (undeline, overline, etc)
• Style is the style of the line (Wavy, dottet, etc)

Here are some simple examples of how to use the 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: https://www.w3schools.com/cssref/pr_text_text-decoration.asp

Answer 3

To remove the underlining of a link, use the following property; to{ text-Decoration: None; }

Answer 4

Wouldn’t use text-decoration-color or text-decoration-style because it is incompatible with the Internet Explorer:

I don’t think it’s a good idea to use unsupported styles for all modern browsers. After all, you want your site to look the same for all audiences.

There is a simple way around this by using border-bottom in the text, without prejudice to the visual of the site and compatible with all browsers:

Remove the underline from the link normally, using text-decoration: none;

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

Add a border-bottom and display: inline to the text:

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

See the result (adding a underlining red):

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