Underlining an html anchor with different color

You cannot specify the underline color separately, but you can use a little trick:

a {
    color: red;
    text-decoration: none;
    border-bottom: 1px solid green;
}

Note that the border will not appear exactly where the underline would have appeared, sorry.

CSS3 allows you to use text-decoration-color: #8f867c to set the color directly.

p {
  color: green;
  text-decoration: underline;
  text-decoration-color: #8f867c;
}

span {
  color: #8f867c;
}

<p>My underline is <span>#8f867c</span></p>

Assuming you want the "border" to only show when user moves his mouse over it you should do something like this:

a {
  text-decoration: none;
}

a:hover {
  border-bottom: 1px solid blue;
  text-decoration: none;
}