Undeline color

We have CSS property text-decoration-color for changing underline color. It works in Firefox and doesn’t work in any of the major browsers.

Instead of text-decoration-color we use border-bottom:

a {border-bottom: 1px solid red;}

or background gradient:

.test-underline { background: linear-gradient(to right, red, red 100%);
  background-position: 0 100%;
  background-size: 10px 1px;
  background-repeat: repeat-x;
}

or box-shadow:

box-shadow: 0 -1px 0 red inset;

Also we can use some inline tag inside <a>

HTML

<a href=""><span>Link</span></a>

CSS

a {color: red;}
a span {color: blue;}