<p>Check out my cool underline.</p>

<a href="#">I'm a link with a cool underline. Hover me!</a>
 p, a {
  text-decoration: underline;
  -webkit-text-decoration-color: #E18728;
  text-decoration-color: #E18728; 
 }

a:visited {
  -webkit-text-decoration-color: #94530D;
  text-decoration-color: #94530D; 
}

a:hover { 
  -webkit-text-decoration-color: #28B1E1;
  text-decoration-color: #28B1E1; 
}

a:active {
  -webkit-text-decoration-color: #006E94;
  text-decoration-color: #006E94; 
}

body {
  font-family: sans-serif; 
  font-size: 2.5em;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.